CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cromwell
Cromwell

Reputation: 506

changing the content of a nav/div with javascript

I have a nav like this:

<nav class="subnav">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

and another one like this:

<nav class="subnav">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

I want an element that will swap my subnav into another using onclick event. If the user clicks Alphabetical Group, it should remove the second one and use the first. If the user clicks on Numerical Group, it should remove the first one and show the second.

There should be a default state too.

How can i do this ?

Upvotes: 2

Views: 1885

Answers (2)

Aniruddha
Aniruddha

Reputation: 308

HTML 

<nav class="subnav" id="alphabetical">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

<nav class="subnav" id="numeric" style="display:none;">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

<input type="button" id="one" value="Show Alphabetical" />
<input type="button" id="two" value="Show Numeric" />

JS:

$(document).ready(function(){
    $("#one").click(function(){
        $("#numeric").hide();
        $("#alphabetical").show();           
    });

    $("#two").click(function(){
        $("#alphabetical").hide();
        $("#numeric").show();           
    });
});

Demo

Upvotes: 5

nordhagen
nordhagen

Reputation: 809

The easiest would be to attach a unique class to both uls:

<nav class="subnav alphabetical">
 <ul>
  <li><a href="a.html">This goes to content A.</a></li>
  <li><a href="a.html">This goes to content B.</a></li>
  <li><a href="a.html">This goes to content C.</a></li>
 </ul>
</nav>

<nav class="subnav numerical">
 <ul>
  <li><a href="1.html">This goes to content 1.</a></li>
  <li><a href="1.html">This goes to content 2.</a></li>
  <li><a href="3.html">This goes to content 3.</a></li>
 </ul>
</nav>

Then in JS/jQuery:

$('.subnav').on('click', function(e){
  var $target = $(e.target);
  $target.hide();
  if($target.hasClass('numerical')) {
    $('.alphabetical').show();
  }
  else {
    $('.numerical').show();
  }
});

Upvotes: 0

Related Questions