Umeed Umeed - 7 months ago 8
HTML Question

How to push down `<li><span>` when using jquery `.slidedown()`

I apologize if the question is confusing I'm not quite sure how to word it.

Basically, I have a jquery code and what it does is it displays content within a

div
that is nested in an
li
. What happens is when I click the header, and the content drops down, it pushes the next header down visually but if you click anywhere on the already displayed content, it doesn't slide back up it reveals the next content.

Test Page <~~ in this test page is where you can see the example, just click on the header with the + and it works until you want to close it.

I'm not sure what's causing the issue.

EDIT I noticed the "+" sign shows up just above the picture in the section Create your own fundraising page", that is where the next header appears when collapsed, but plus sign is within a span that is absolute, so it should move down too shouldn't it?

HTML:
<ul id="toggle-view">
<li>
<h6>Choose a fundraising idea</h6>
<span>+</span>
<div class="panel">
<p>here are countless ways to contribute! Shave your head, run a marathon, or give up your birthday - the choice is yours! We've listed some of our most popular fundraising ideas but feel free to run with your own idea by choosing the 'Other' stream.</p>

<br>

<img src="../images/content/pagebuilder/ChooseAStream_screenshot.png" alt="Choose a Stream screenshot" width="100%"/>

</div>
</li>
<li>
<h6>Create your own fundraising page</h6>
<span>+</span>
<div class="panel">
<p>Click on 'Register' to set up a fundraising page. You can set one up on your own or create a page where friends or colleagues can join you. Let us know what kind of fundraiser you're holding and we'll provide you with all the tools to help you succeed.</p>

<br>
<img src="../images/content/pagebuilder/PersonalPage_screenshot.png" align="left" alt="Personal page screenshot" width="100%"/>

</div>
</li>
<li>
<h6>Access your Participant Centre</h6>
<span>+</span>
<div class="panel">
<p>As a Canadian Cancer Society cancer fighter, you have access to an online Participant Centre where you&#8217;ll find customizable, interactive tools to get people excited about sharing in your fundraising success!</p>

<img src="../images/content/pagebuilder/ParticipantCentre_screenshot.png" align="left" alt="Participant Centre screenshot" width="100%"/>

</div>
</li>
</ul>

CSS:
/*Drop Down Content*/
#toggle-view {
list-style:none;
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width: 50%;
}

#toggle-view li {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
}

#toggle-view h6 {
margin:0;
font-size:14px;
}

#toggle-view span {
position:absolute;
right:5px; top:0;
color:#3498db;
font-size:13px;
}

#toggle-view .panel {
margin:5px 0;
display:none;
}

jQuery:

$(document).ready(function () {

$('#toggle-view li').click(function () {

var text = $(this).children('div.panel');

if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}

});

});


Any suggestions??
Thank you for your time!

Answer

The problem is that your li has a floated image inside of it, but no float-clearing mechanism after the image. In turn, the computed height of the li doesn't include the height of the image, so the + symbol shows up above the image, right where it should be according to the CSS.

Additionally due to the same issue, the image is in the space of the next li, causing it to register the click event for the next content rather than the event for the current content. In order to fix this, add a simple clearfix rule to your CSS

#toggle-view li::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

This will create an imaginary block after the contents of each li inside of your toggle-view ul that will clear any floated items inside of the li