Question

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,

The code that Ive used is

<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
   <div id="tab1">
   </div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>

and the script looks like

 $(document).ready(function()
 {
 $("#slider").css({"display":"none"});
 $(".clickMe").click(function()
 {
 $("#slider").slideDown("slow");
 }
 );
 });

With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?

Answer 1

I’ve put a fiddle together.

Here is the relevant code:
HTML

<div id="wrapper1">
  <div class="clickMeWrapper">
    <a class="clickMe" id="tab1" href="#">Click Me!</a>
    <div class="slider">
    </div>
  </div>
  <div class="clickMeWrapper">
    <a class="clickMe" id="tab1" href="#">Click Me!
    </a>
    <div class="slider">
    </div>
  </div>
</div>
<div id="wrapper2">
</div>​

jQuery

$(document).ready(function() {
    $(".slider").hide();
    $(".clickMeWrapper").click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $(this).children(".slider").slideToggle("slow");
    });
});​

If something’s not clear, please let me know.