How do I make my 'appear from know where' sliding div stay open and wait until clicked again to close? jQuery

Question

After I click on a button div another div appears sliding down the screen with information, but then closes automatically. I want this sliding div to stay open until I click on the button div again to close it.

The jQuery code is below :

jQuery(document).ready(doContactInfoPanel);

function doContactInfoPanel() {
    jQuery('.info-btn-slide').click(function() {
        jQuery('#info-slide-panel').slideToggle('slow');
    });
}

So my question is how can I keep #info-slide-panel open until I click on .info-btn-slide again to close it?

---

jQuery(document).ready(doAddHtml);

function doAddHtml() {
    jQuery('.slide').after("<div id='info-slide-panel'><p>Work Tel :  <br><br></p><br><p>Cell :  <br><br></p></div>");
    jQuery('#info-slide-panel').after("<div class='info-slide'><a href='#'  class='info-btn-slide'></a></div>");
}

Answer 1

Does this work for you?

Javascript

$('.slide').click(
    function(){
        $(this).slideToggle('slow');
    }
);

$('.open').click(
    function(){
        $('.slide').slideToggle('slow');
    }
)

CSS

.slide{
 height: 100px;
 width: 100px;
 background: red;
}

HTML

<div class="slide">Hello how do yo do</div>
<div class="open">open</div>

Answer 2

you must be registering the click event twice, and since its toggled it just opens and closed. can you look at the source and see if you are loading that piece of javascript in 2 places?