0

I would like to know how to display only one div at a time using toggle in jQuery but I dont know how to do that. This is my code at the moment. I'm new to coding so I would appreciate the help.

$(document).ready(function() {
$('#SignInButton').on('click', function() {
$('#SignInContainer').toggle();
 });
 });

$(document).ready(function() {
$('#HomeButton').on('click', function() {
$('#HomeContainer').toggle();
});
});

$(document).ready(function() {
    $('#ContactButton').on('click', function() {
    $('#FAQ').toggle();
    });
    });
user10755614
  • 9
  • 2
  • Please share html as well – A. Meshu Mar 31 '20 at 20:51
  • Can you clarify your goal? Do you want to show the SignInContainer div, but hide the other two (HomeContainer and FAQ)? If so you might want to use .hide() and .show() instead of toggle() https://api.jquery.com/hide https://api.jquery.com/show – schwechel Mar 31 '20 at 20:58
  • @schwechel I would like to show only one of those at any one time. So when i show FAQ i would like to hide HomeContainer and SignInContainer and vice versa – user10755614 Mar 31 '20 at 20:59

1 Answers1

-1

First, you don't need multiple ready functions. I would simplify it to this.

$(document).ready(function() {
  $('#SignInButton').on('click', function() {
    $('#SignInContainer').show();
    $('#HomeContainer').hide();
    $('#FAQ').hide();
  });

  $('#HomeButton').on('click', function() {
    $('#SignInContainer').hide();
    $('#HomeContainer').show();
    $('#FAQ').hide();
  });

  $('#ContactButton').on('click', function() {
    $('#SignInContainer').hide();
    $('#HomeContainer').hide();
    $('#FAQ').show();
  });
});
schwechel
  • 305
  • 3
  • 10