Trying to find a way to hide all other divs when clicking on a navbar link to toggle them. Currently, the divs stay active when a new link is clicked. The goal is for them to slide up and the clicked one to slide down.
<script type="text/javascript>
$(document).ready(function(){
$(".output .about , .resume").hide();
$("#about").click(function(e)
{
e.preventDefault;
$(this).find('li').toggleClass('active ');
$(".about").slideToggle("slow");
});
$("#resume").click(function(e)
{
e.preventDefault;
$(this).find('li').toggleClass('active');
$(".output .resume").slideToggle("slow");
});
});
<div class="cont2">
<ul>
<a href="#" id="about"><li class="fade-in one " >About</li></a>
<a href="#" id="resume"><li class="fade-in two">Resume</li></a>
<a href="#"><li class="fade-in three">Portfolio</li></a>
<a href="#"><li class="fade-in four">Contact</li></a>
</ul>
</div>
<div class="output">
<div class="about">
<p>About</p>
</div>
<div class="resume">
<p>Resume</p>
</div>
</div>
EDIT : Updated code:
$(document).ready(function(){
$(".cont1").hide();
$(".cont1").fadeIn(1000);
$(".output .about , .resume").hide();
$("#about").click(function(e)
{
e.preventDefault();
$(".cont2 li .active").removeClass('active');
$(this).find('li').toggleClass('active');
$(".about").slideToggle("slow");
$(".resume").slideUp("slow");
});
$("#resume").click(function(e)
{
e.preventDefault;
$(this).find('li').toggleClass('active');
$(".output .resume").slideToggle("slow");
});
});