CODEWITHSUNDEEP
javascriptjqueryhtml
Francis Mubiru
Francis Mubiru

Reputation: 11

Toggle between divs

I need to hide these divs on click of the button in another div as shown below. When I click on a button in another div, it hides the other div and the opposite.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        tesing hide
    </title>
    <style>
      #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; }
    </style>

</head>

     <center>
        <div id="ticket">
            <div> this is the content of my ticket div
            </div>
            <button>Show usernamepassword</button>

        </div>

        <div id="usernamepassword">
            <div> this is the content of username and password div</div>
            <button>Show ticket</button>
        </div> 
    </center>
 </html>

Upvotes: 1

Views: 87

Answers (3)

Dimitrios Matanis
Dimitrios Matanis

Reputation: 926

$( ".target" ).hide();

This will hide an element and similarly

$( ".target" ).show();

will show it.

Using these two in a couple of functions and then calling them from click events on the buttons, should give you what you're looking for.

I am not providing the full code solution as this is trivial and you should be able to follow the docs yourself.

Here is a link to the documentation so you can read about it:

http://api.jquery.com/show/

http://api.jquery.com/hide/

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 58647

Like this?

$('#usernamepassword').hide();

$('#ticket button').on('click', function(){
  $('#usernamepassword').toggle();
  $('#ticket').toggle();
});

$('#usernamepassword button').on('click', function(){
  $('#ticket').toggle();
  $('#usernamepassword').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        tesing hide
    </title>
    <style>
      #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; }
    </style>

</head>
     <center>
        <div id="ticket">
            <div> this is the content of my ticket div
            </div>
            <button>Show usernamepassword</button>

        </div>

        <div id="usernamepassword">
            <div> this is the content of username and password div</div>
            <button>Show ticket</button>
        </div> 
    </center>
 </html>

Upvotes: 1

DenseCrab
DenseCrab

Reputation: 1313

Just add an id to both of the buttons and assign an event to them to toggle the divs. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        tesing hide
    </title>
    <style>
      #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; }
    </style>

</head>
     <center>
        <div id="ticket">
            <div> this is the content of my ticket div
            </div>
            <button id="showUsr">Show usernamepassword</button>

        </div>

        <div id="usernamepassword">
            <div> this is the content of username and password div</div>
            <button id="showTicket">Show ticket</button>
        </div> 
    </center>
 </html>
 
 <script>
     $('#showUsr').on('click',function(){
      $('#usernamepassword').toggle();
    });

    $('#showTicket').on('click',function(){
      $('#ticket').toggle();
    });
</script>

Upvotes: 0

Related Questions