Van Adrian Cabrera Van Adrian Cabrera - 6 months ago 10
Javascript Question

How to show and hide a section?

I want to show the div of selected HTML link.

For example:

I clicked on the html link Categories the

<div id="categories" ... >
will be showed and the other div's will hide.

HTML

<div id="col-navigation">
<ul>
<li>
<a href="#"> Quizzes </a>
</li>
<li>
<a href="#"> Categories </a>
</li>
<li>
<a href="#"> Jump </a>
</li>
</ul>
</div>

<div id="quizzes"> //default showed
Quizzes!
</div>

<div id="categories" style="display:none">
Categories!
</div>

<div id="jump" style="display:none">
Jump!
</div>

Answer

Try this:-

$('#col-navigation a').click(function(){
   $('#quizzes,#categories,#jump').hide();
   $('#' + $.trim($(this).text()).toLowerCase()).show();
});

Fiddle

OR

$('#col-navigation a').click(function(){
   $('#quizzes,#categories,#jump').show()
   .not('#' + $.trim($(this).text()).toLowerCase()).hide();
});

Fiddle

Comments