CODEWITHSUNDEEP
jquery
Sourajyoti Bose
Sourajyoti Bose

Reputation: 83

Change the menu on click of button

I am trying to change the listing of Menu items from :
menu 1 menu 2
to
menu 3 menu 4
by clicking a button.

There are 2 buttons Div 1 and Div 2.
I click on Div 1 which appears when menu 1 and menu 2 are showing.
Clicking on Div 1 changes the menu 1 menu 2 ==> menu 3 menu 4 and brings Div 2 button.

But clicking on Div 2 does not take me back to menu 1 and menu 2.
The fiddle used is as follows : http://jsfiddle.net/SO_AMK/BcFVv/1/ .

<div id="buttons">
 <a href="#" id="2" class="mybutton myred" >Div 2</a>
 <a href="#" id="1" class="mybutton myblue">Div 1</a>
</div>

<div id="pages">
  <div id="1" class="mydivshow">
    <a href=".menu1page">Menu1</a>
  </div>
  <div id="1" class="mydivshow">
    <a href=".menu2page">Menu2</a>
  </div>
  <div id="1" class="mydivshow">
    <a href=".menu3page">Menu3</a>
  </div>
  <div id="2" class="mydivhide">
    <a href=".menu1page">Home</a>
  </div>
  <div id="2" class="mydivhide">
    <a href=".menu2page">About</a>
  </div>
  <div id="2" class="mydivhide">
    <a href=".menu2page">Contact</a>
  </div>
</div>

JS code:-

$("#buttons a").click(function() {
  var id = $(this).attr("id");
  $("#pages div").css("display", "none");
  $("#pages div#" + id + "").css("display", "block");
  $("#buttons a").css("display", "none");
  $("#buttons a#" + id + "").css("display", "block");
});
$("#pages div:not(#1)").css("display", "none");
$("#buttons a:not(#2)").css("display", "none");

This does not change back to Menu 1 and Menu 2. Please advise.

Upvotes: 0

Views: 295

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You can't use multiple times the same id.
But you can use mutilple times a class.

$("#buttons a").click(function() {
  var id = $(this).attr("id");
  $("#pages div").css("display", "none");
  $("#pages div." + id + "").css("display", "block");
  $("#buttons a").css("display", "none");
  $("#buttons a:not(#" + id + ")").css("display", "block");
});
$("#pages div:not(.1)").css("display", "none");
$("#buttons a:not(#2)").css("display", "none");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons">
 <a href="#" id="2" class="mybutton myred" >Div 2</a>
 <a href="#" id="1" class="mybutton myblue">Div 1</a>
</div>

<div id="pages">
  <div class="1 mydivshow">
    <a href=".menu1page">Menu1</a>
  </div>
  <div class="1 mydivshow">
    <a href=".menu2page">Menu2</a>
  </div>
  <div class="1 mydivshow">
    <a href=".menu3page">Menu3</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu1page">Home</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu2page">About</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu3page">Contact</a>
  </div>
</div>

Upvotes: 1

Related Questions