CODEWITHSUNDEEP
jquerycss
synergy989
synergy989

Reputation: 119

Slide Text on top of jQuery slideToggle

Trying to figure out how to slide the text/div on top of a div using the slideToggle function.

Basically I want to have a tab sticking up for the user to click on (right now it's just text), when clicked the pop up slides up. I have everything set up, but the issue is when the div slides up, the toggle button needs to slide up on top of it as well.

Here is the JS fiddle: http://jsfiddle.net/c2WaV/1/ (see the toggle in the bottom right corner).

jQuery:

$(document).ready(function () {

    $(".questionBox").hide();
    $(".toggle").show();

    $('.toggle').click(function () {
        $(".questionBox").slideToggle();
    });

});

HTML:

<body>
    <a href="#" class="toggle">Toggle</a>

    <div class="questionBox">
        Info inside the toggled box
    </div>
</body>

CSS

.questionBox {
    display:none;
    position:absolute;
    bottom:0;
    right: 20px;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
.toggle {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

Should I just set it up to slide up to the height of the div that's sliding? I am hoping there is an easy and clean way to do this.

Cheers, Robb

Upvotes: 0

Views: 637

Answers (2)

iConnor
iConnor

Reputation: 20189

Take a look at this fiddle i have created

JSFiddle

so what i done was wrapped all of the content in a #container and gave it the .toggle styles, so now we have all of our content in a container that is absolute to the bottom, then all i done was removed the absolute positioning from the Question box, so that it reGains its DOM space so that when it slides up it pushes everything in the way up.

the final code is

<div id="container">
    <a href="#" class="toggle">Toggle</a>
    <div class="questionBox">Info inside the toggled box </div>
</div>

.questionBox {
    display:none;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
#container {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

i have made some adjustments too here is the new link

JSFiddleNew

Note i changed your jQuery to this

var $questionBox = $(".questionBox");

$questionBox.hide();
$("#container").show();

$('.toggle').click(function () {
    $questionBox.slideToggle();
});

remember that $ is a function so if you are using the same element you should define it in a variable and re-use it instead of fetching the element Twice - this will help performance

Upvotes: 1

Thiago Dias
Thiago Dias

Reputation: 1

see in the link: http://jsfiddle.net/c2WaV/1/

html

<div id="container">
   <a href="#" class="toggle">Toggle</a>
   <div class="questionBox">Info inside the toggled box </div>
</div>

css

.questionBox {
   display:none;
   height:200px;
  background-color: grey;
  color: #FFFFFF;
  padding:20px;
}
#container {
  display:none;
  position:absolute;
  bottom:0;
  right: 0;
}

js

$(document).ready(function () {
  $(".questionBox").hide();
  $("#container").show();

  $('.toggle').click(function () {
      $(".questionBox").slideToggle();
  });
});

is this?

hope this help!

Upvotes: 0

Related Questions