I'm struggling to articulate my question clearly, so please bear with me.
Essentially, I have a jquery script that reveals content within a div nested in an li. When I click on the header, the content drops down and visually pushes the next header down. However, if I click anywhere on the displayed content, it doesn't slide back up but instead reveals the next content.
Test Page <~~ you can find an example of this behavior on the test page by clicking on the + header and trying to close it.
I'm at a loss as to what's causing this issue.
EDIT I've noticed that the "+" sign appears just above the picture in the "Create your own fundraising page" section, where the next collapsed header should show up. The plus sign is contained within an absolute-positioned span, so shouldn't it also move downward?
HTML:
<ul id="toggle-view">
<li>
<h6>Choose a fundraising idea</h6>
<span>+</span>
<div class="panel">
<p>There 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 come up with your own 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’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 advice would be greatly appreciated. Thank you for taking the time!