7

Using jQuery fadeToggle for the navigation bar, how to show / hide content one a...

 2 years ago
source link: https://www.codesd.com/item/using-jquery-fadetoggle-for-the-navigation-bar-how-to-show-hide-content-one-at-a-time.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Using jQuery fadeToggle for the navigation bar, how to show / hide content one at a time?

advertisements

I am very new to CSS/Jquery so please forgive the assumed simplicity of this question.

I have a navigation links to: ABOUT and CONTACT. I have figured out how to fadeToggle their content. However, if you click one link followed by a different one, their content fades in/out sequentially and stack on top of each other. I would like for the content of each link to automatically fade out if a different link is clicked on. For example, if the user clicks "CONTACT", the contact information will fade in. Then, if the user clicks "ABOUT" I would like for the contact information to fade out and the about information to fade in. Can anyone help in lay language?

What I have so far in HTML/CSS/JS:

<body>

<div id="navbar">
<ul>
<li><a href="#" id="about">ABOUT</a></li>
<li><a href="#" id="contact">CONTACT</a></li>
</ul>
</div>

<div id="aboutcontent" class="hidden">
 <p> ABOUT ME </p>
</div>

<div id="contactcontent" class="hidden">
<p>NAME, CITY, EMAIL, PHONE NUMBER</p>
</div>

</body>
</html>

CSS:

.hidden {display:none}
#navbar ul li { display: inline;}

JS

$(document).ready(function(){
$('a#contact').click(function() {
$('div#contactcontent').fadeToggle();
return false;
});

$('a#about').click(function() {
$('div#aboutcontent').fadeToggle();
return false;  

});
});

Try this code instead:

$(document).ready(function(){

  $('a#contact').click(function(e) {
    e.preventDefault();
    $('div#aboutcontent').hide();
    $('div#contactcontent').fadeIn();
  });

  $('a#about').click(function(e) {
    e.preventDefault();
    $('div#contactcontent').hide();
    $('div#aboutcontent').fadeIn();
  });   

});

You can see a working example here: http://jsfiddle.net/ECBhr/1/


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK