Expand all and collapse all in jQuery not working as per requirement

Question

I am new to jQuery, I have created a page below and have the jquery function for expand collapse. Every thing is working fine except following fact that, some of the child elements are already expanded/collapsed then if I am doing expand all/collapse all then it's doing reverse for the child element as I am doing toggle function so if child element is already expanded and I am doing expand all then it's expanding rest of the divs but collapsing the element already expanded,and so is vice-versa. Please suggest how to solve this issue. Thank you.

javascript:

    $(function(){
          $('[id^=hideAns],[id^=showAns]').click(function(){
                $(this).hide();
                $(this).siblings().show();
                $(this).closest('.qbox').find('[id^=ans]').toggle(500);
          });
        });

    $(function(){
          $('[id^=showall],[id^=hideall]').click(function(){
                $(this).hide();
                $(this).siblings().show();
                $('.qbox').find('[id^=ans]').toggle(500);
                $('.qbox').find('.icons').toggle();
          });
        });

html:

<form name="contenttemp" id="contenttemp" method="post">

<div id="contentDiv" class="wrapperBox"><br>
<span class="showHideTxt" id="showall" style="float:right; cursor:pointer;">Show all</span>
<span class="showHideTxt" id="hideall" style="float:right; display:none; cursor:pointer;">Hide all</span><br>


    <div class="qbox">

        <span class="qclass">Q. No.1)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 109</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 109</span>
    </div>
    <br>

    <div class="qbox">

        <span class="qclass">Q. No.2)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 108</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 108</span>
    </div>
    <br>

    <div class="qbox">

        <span class="qclass">Q. No.3)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 105.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 105</span>
    </div>
    <br>

</div>
</form>

Answer 1

It would be better to use .hide(), .show() than to use .toggle()...

    $(function(){
      $('[id^=showAns]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $(this).closest('.qbox').find('[id^=ans]').show(500);
      });
     $('[id^=hideAns]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $(this).closest('.qbox').find('[id^=ans]').hide(500);
      });
     $('[id^=showall]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $('.qbox').find('[id^=ans]').show(500);
            $('.qbox').find('[id^=showAns]').hide();
            $('.qbox').find('[id^=hideAns]').show();
      });
    $('[id^=hideall]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $('.qbox').find('[id^=ans]').hide(500);
            $('.qbox').find('[id^=showAns]').show();
            $('.qbox').find('[id^=hideAns]').hide();
      });
    });

Please check.. jsfidle

This may be your answer, what you're finding for..!!