My goal is to change the plus sign to a minus sign when it is collapsed by modifying the plus:before (by setting display to none or something similar to create a minus sign effect.) Currently, my code is functioning properly and collapsing as intended. You can view a demo here.
HTML
<div class="box">
<div class="box-item">
<p>Item #1<span class="plus"></span></p>
<ul>
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
</div>
<div class="box-item">
<p>Item #2<span class="plus"></span></p>
<ul style="">
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
</div>
<div class="box-item">
<p>Item #3<span class="plus"></span></p>
<ul style="">
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
</div>
<div class="box-item">
<p>Item #4<span class="plus"></span></p>
<ul style="">
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
</div>
<div class="box-item">
<p>Item #5<span class="plus"></span></p>
<ul style="">
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
</div>
</div>
jQuery
$(document).ready(function () {
$('.box p').click(function(){
var target = $(this).parent().children('.box ul');
if (!target.is(":visible")) {
$('.box ul').slideUp();
$(target).slideDown();
} else {
$(target).slideUp();
}
});
});