ronbosc ronbosc - 6 months ago 19
jQuery Question

Div's Open/Close with FadeIn Effects

<html>
<head>
<script type="text/javascript" src="jquerynew.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".home").click(function(event) {
$(".hout").slideToggle("slow");
});
$(".javascript").click(function(event) {
$(".jout").slideToggle("slow");
});
});
</script>

<style>
.menu { margin:0px auto; border:1px solid lightgray; height:30px; width:1000px;background:#FFF;}
#page-content { margin:0px auto; width:1000px; border:1px solid green; margin-top:4px; background:#FFF; overflow:auto; height:500px; }
.home {padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;}
.javascript { padding-left:19px; padding-right:29px; padding-top:2px; float:left; border-right:1px solid lightgray; }
.jout { display:none; padding:20px; }
.hout { display:none; padding:20px; }
</style>
</head>

<body>
<div class="menu">
<div class="home">Home</div>
<div class="javascript">Javascript</div>
<div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery</div>
<div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX</div>
<div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + PHP</div>
<div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">AJAX+ PHP</div>
<div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;">jQuery + AJAX + PHP</div>
</div>

<div class="hout"> Home Content goes here</div>
<div class="jout"> Javascript Content goes here</div>
</body>
</html>


I have Home | Javascript | jQuery | AJAX etc.,

I need my code to work like:


  • when I click home, "hout" div should open with fadeIn effect

  • when I click javascript, "jout" div should open with fadeIn effect
    and "hout" div should close.

  • when I click jQuery, "jqout" div be opened and previous opened div be closed.



I couldn't get the code to hide/close the previously opened div's. Can anyone help?

Answer

create a div around the content

 <div id="content">
 <div class="hout"> Home Content goes here</div>
 <div class="jout"> Javascript Content goes here</div>
 </div>

so that it is becomes generic.. and don't have to call particular div hide again and again, like $(".hout").hide() when click on javascript and this will work even when you add some other contents without having them to call particular div hide....

and jquery

$(document).ready(function()
{
   $('#content').children().hide(); 

   $(".home").click(function(event)
   {
      $('#content').children().not('.hout').hide();  
//children() will get all the div inside content ... .not('.hout') will exculde the `div` which you have to slideToggle.. so that it won't hide.. and slideToggle works as it should
      $(".hout").slideToggle("slow");      
   });

   $(".javascrpt").click(function(event)
   {
      $('#content').children().not('.jout').hide(); 
      $(".jout").slideToggle("slow");
   });
}); 

working fiddle

Comments