JQuery Toggle With Plus and Minus Icon

Question

I have two sections namely

1. section one

2. section two

I'm performing JQuery slide up and slide down between two div sections with plus and minus sign change..currently it works superbly i want to make one small change in my code when i click on section one contents of section two is hidden and vice versa i need both should be opened simultaneously can somebody help me out in achieving it Thanks!

http://jsfiddle.net/v9Evw/348/

HTML

<ul id="toggle-view">
    <li >
        <h3 style='background:#4c97d0;color:#fff;'>Section one</h3>
        <span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <br>
    <li>
        <h3 style='background:#4c97d0;color:#fff;'>section two</h3>
        <span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
</ul>

JQUERY

var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$('li h3, li span', parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('p', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {

            // slide up the element and set it's marker to '+' 
            $('p', $(this)).slideUp(delay);

        });

        // display the current li with a '-' marker
        $('p', li).slideDown(delay);

    }
    else {
        $('p', li).slideUp(delay);

    }
    $('span',li).toggleClass('glyphicon-plus glyphicon-minus');
});

Answer 1

Remove the loop which changes the state on all the content areas. You only want to apply it to the selected content.

So now you are saying; if this is open, close it, otherwise open it.

if (!$('p', li).is(':visible')) {

  $('p', li).slideDown(delay);

} else {

  $('p', li).slideUp(delay);

}

http://jsfiddle.net/v9Evw/350/

Answer 2

Please find the updated fiddle
http://jsfiddle.net/v9Evw/349/

//$('li', parent).each(function() {

        // slide up the element and set it's marker to '+' 
        $('p', $(this)).slideUp(delay);

   // });

Only selected section will slide instead of section 1 and 2. Please see if this meets ur requirement