how to hide class on second click

Question

this is my code. if i click first time i can show div id named as "surveytooldd" . which is disappear before click. but if i click first it it appears but i want to disapper it on second click.

<div class="tool survey-tool vertical-center color14" onclick="dropdownmenuHeader(this, event, 'surveytooldd');MM_showHideLayers('surveytooldd','','show');MM_showHideLayers('caption','','hide')">
    <img src="" class="vertical-center">
    <span class="caption vertical-center">Survey Tool</span>
</div>

<ul class="survey-tool-drpdwn" style="visibility: hidden;" id="surveytooldd">
    <li class="survey-tool">
        <asp:LinkButton id="aSurveyTool" runat="server" OnClick="aSurveyTool_Click"><span>Survey Tool</span></asp:LinkButton>
    </li>
    <li class="poll-tool">
        <asp:LinkButton id="aPollTool" runat="server" OnClick="aPollTool_Click"><span>Poll Tool</span></asp:LinkButton>
    </li>
    <li class="assessment-tool">
        <asp:LinkButton id="aAssessmentTool" OnClick="aAssessmentTool_Click" runat="server"><span>Assessment Tool</span></asp:LinkButton>
    </li>
</ul>

Possible duplicate of [toggle show/hide div with button?](http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) — Krupesh Kotecha, Jun 22 '16 at 07:06

score 1 · Answer 1 · answered Jun 22 '16 at 07:02

1

Use jQuery toggle.

$( ".target" ).toggle();

This function switches between the states (show and hide) of an element. If the element is currently hidden , it will be shown and vice versa. More about this here

answered Jun 22 '16 at 07:02

Sooraj

9,717
9
64
99

score 1 · Answer 2 · answered Jun 22 '16 at 07:03

1

Try this:

$('class or id').click(function(){
$(#surveytooldd).toggle();
});

if you still facing problem than comment below.

answered Jun 22 '16 at 07:03

Yogesh Shakya

355
3
15

Krupesh Kotecha · Answer 3 · 2016-06-22T07:23:05.637

try this

$("#disp").click(function() {
  $("#surveytooldd").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="survey-tool-drpdwn" style="display: none;" id="surveytooldd">
  <li class="survey-tool">
    <asp:LinkButton id="aSurveyTool" runat="server" OnClick="aSurveyTool_Click"><span>Survey Tool</span>
    </asp:LinkButton>
  </li>
  <li class="poll-tool">
    <asp:LinkButton id="aPollTool" runat="server" OnClick="aPollTool_Click"><span>Poll Tool</span>
    </asp:LinkButton>
  </li>
  <li class="assessment-tool">
    <asp:LinkButton id="aAssessmentTool" OnClick="aAssessmentTool_Click" runat="server"><span>Assessment Tool</span>
    </asp:LinkButton>
  </li>
</ul>
<button id="disp">Show Hide</button>

score 0 · Answer 4 · edited Jun 22 '16 at 07:26

use "display:none;" instead of "visibility:hidden;" and slideToggle for smooth toggle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tool survey-tool vertical-center color14" onclick="$('#surveytooldd').slideToggle()">
  <span class="caption vertical-center">Survey Tool</span>
</div>
<div>
  <ul class="survey-tool-drpdwn" style="display:none;" id="surveytooldd">
    <li class="survey-tool"><span>Survey Tool</span>
    </li>
    <li class="survey-tool"><span>Poll Tool</span>
    </li>
    <li class="survey-tool"><span>Assessment Tool</span>
    </li>
  </ul>
</div>

how to hide class on second click

4 Answers4