CODEWITHSUNDEEP
javascriptjquery
Hossam Din
Hossam Din

Reputation: 65

switch/hide div JQuery

When I expand a division it can't be collapse again. All I need is when the division is shown I want to hide it again when clicking on it.

Here's my HTML: 

<div class="login_area" id="clickHere2">
    Signup

    <div class="drop-down" id="signup_area_hover">
        Signup
    </div>
</div>

<div class="login_area" id="clickHere">
    Login

    <div class="drop-down" id="login_area_hover">
        Login
    </div>
</div>

<div class="drop-down" id="dropdown_login">
    <div class="dropdown_login_header">
        <div class="beeper_value"></div>

        <div class="beeper_login"></div>
    </div>Hello World 111
</div>

<div class="drop-down" id="dropdown_signup">
    <div class="dropdown_signup_header">
        <div class="beeper_signup"></div>
    </div>Hello World 2222
</div>

and here's the JS : 

<script type="text/javascript">

   $( '#clickHere' ).click(function() {
     $( '#dropdown_login' ).slideToggle(500);
});

 $( '#clickHere2' ).click(function() {
     $( '#dropdown_signup' ).slideToggle(500);
});     

</script>

I want to add an if condition if the clickHere is shown, ClickHere2 hides and vice versa.

Upvotes: 2

Views: 129

Answers (2)

martynas
martynas

Reputation: 12290

DEMO

jQuery:

$( "#myBtn" ).click(function() {
     $( "#myDiv" ).toggle();
});

HTML:

<div id="myDiv"></div>
<button type="button" id="myBtn">Toggle</button>

CSS:

#myDiv {
    background-color:red;
    height:75px;
    width:75px;
}

Resources:

Upvotes: 1

Niels
Niels

Reputation: 101

Take a look at the toggle / slideToggle functions in jquery. http://api.jquery.com/toggle/ and https://api.jquery.com/slideToggle/ There are examples on the bottom of the page.

Upvotes: 1

Related Questions