SlideToggle - reverse toggle and button hides

Question

I have a problem with my jquery slideToggle.

Please visit http://en.fjordblink.webhipster.dk/foedekar/ and check out the button.

The following is my script i am using:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div id="slidebottom" style="position: relative;">
<button>Button</button>
<div style="position: absolute;">Slide from top and down</div>
</div>

<script>
$('#slidebottom').on('click', clickButton);    
function clickButton()
{
  $(this).stop().slideToggle();
}
</script>

First of all, i want the text to be hidden, and first displayed when the button is presset. But they should still be able to hide the text again by pressing the button. So, i want the effect of slideToggle to be reversed.

Another problem is, that the button toggles as well. This should be visible all the time. If i move the button outside the then it will not toggle at all

All help appreciated! :)

Best Regards Patrick

Answer 1

you have to write button outside div like this and remove the position absolute otherwise you won't get the animation.

HTML

<button id="btn">Button</button>
<div id="slidebottom" style="position: relative;">

    <div>
        Slide from top and down<br>
        Slide from top and down<br>
        Slide from top and down
    </div>
</div>

JAVASCRIPT

$('#btn').click(function(){
    $('#slidebottom').stop().slideToggle('slow');
});

jsfiddle link is here

Answer 2

You can use:

$(this).find('div').stop().slideToggle();

instead of:

$(this).stop().slideToggle();

since you want to target the child div element.

Fiddle Demo