I have a problem on the toggle button and I'm not figuring out the reason, when I click on btn-Help it was to appear another help-body div, but it is not working.
Problem with toggle button
-1
asked by anonymous 28.12.2017 / 19:55
2 answers
1
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><divclass="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>
28.12.2017 / 21:17
1
How to make a link, button or anything that you 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;
}
28.12.2017 / 20:52