Problem with toggle button

Question

https://jsfiddle.net/pkr6zeu2/2/

I’m having a problem on the toggle button and I’m not figuring out why, when I click on btn-Help was to pop another help-body div but it’s not working.

Answer 1

How to make a link, button or anything that Voce click show or hide a div

<a href="#" class="clickme">Click Me</a>

   <div class="box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});


body {
    font: 12px/16px sans-serif;
    margin: 10px;
    padding: 0;
}

.clickme {
    background-color: #eee;
    border-radius: 4px;
    color: #666;
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-decoration: none;
}

.clickme:hover {
    text-decoration: underline;
}

.box {
    background-color: #ccc;
    border-radius: 4px;
    color: #333;
    margin: 5px 0;
    padding: 5px 10px;
    width: auto;
}

http://jsfiddle.net/wGbh5/

Answer 2

Best way to do this is by using slideToggle() (more info):

$("#btnHelp").click(function(){
   $("#description").slideToggle();
});

.fundotog  {
    overflow: hidden;
    min-height: 500px;
	background-image: url(../img/6.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: cover;

}
.togglefundo{
	width: 300px;
	height: 270px;
	background: #eee;
	margin-left: 100px;
	margin-top: 60px;
	position: absolute;

}

.btn-Help {
	min-height: 59px;
	width: 300px;
	background-color: aqua;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border: none;
	font-size: 30px;
  color: white;
  display: inline-block;
  cursor: pointer;
	top: 0; left:0;

	  z-index: 1;
}

.help-title{
	min-height: 50px;
	width: 0;
	position: absolute;
	top:0; left: 135px;


}
.help-title .h2{
	margin: 0;
	padding: 0;
	text-align: center;
	color: #ED0003;
	display: none;
}
.help-body{
	width: 300px;
	height: 0px;
	margin-left: 100px;
	margin-top: 120px;
	background-color: #278C98;
	position: absolute;
	text-align: justify;
	border-radius: 0 0 25px 25px;

}
.help-body p{
	margin: 0;
	padding: 0;
	color: #000000;
	padding: 12px 35px;
}
@keyframes fadein-right{
  0%{ opacity:0; margin-left:45px;}
  100%{ opacity:1; margin-left=0;}
}
@keyframes fadein-bottom{
  0%{opacity:0; margin-top:45;}
  100%{opacity:1;margin-top:0;}
}
@keyframes fadeout-right{
  0%{opacity:1; margin-left:0;}
  100%{opacity:0; margin-left:45;}
 @keyframes fadeout-bottom{
   0%{opacity:1; margin-top:0;}
   100%{opacity:0; margin-top:45px;}
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
   <div class="fundotog">
      <div class="togglefundo">
         <div class="btn-Help" id="btnHelp">
         </div>
      </div>
      <div class="help-title" id="helpTitle">
         <h2 id="heading">Need Help</h2>
      </div>
      <div class="help-body" id="helpBody">
         <p id="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
      </div>
   </div>
</section>