Question

i have incorporated a show and hide function on my site Click here – click on the work tab and contact us tab one thing i have noticed this the trigger to hide the hidden div does not work the way i want it to work. For example when you click on the work tab the click on the contact us tab the work hidden div close and vise versa. Does anyone know how i can achieve this.

Here’s my HTML:

 <ul class="nav-bar">
 <li><a class="show_hide" href="#">work</a></li>
 <li><a class="show_hide-2" href="#">contact us</a></li>
 </ul> 

Here’s my JS

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
       });


$(".slidingDiv-2").hide();
$(".show_hide-2").show();
$('.show_hide-2').click(function(){
$(".slidingDiv").hide();
$(".slidingDiv-2").slideToggle();
 });
 });

Also I have added display:none; to show_hide and show_hide-2 however there is a still a slight animation when you load the site, is there a way to work around this?

Answer 1

Change it to:

$('.show_hide').click(function(){
    $(".slidingDiv-2").hide();
    $(".slidingDiv").slideToggle();
});

And

$('.show_hide-2').click(function(){
    $(".slidingDiv").hide();
    $(".slidingDiv-2").slideToggle();
});

You can set the CSS (or inline in the HTML) of the divs to display:none; to hide the divs before the Javascript takes effect, when the page loads.