My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery.
In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hiding and showing the description (image here).
However, when I hide the description in mobile view, it disappears in the desktop view if I resize the browser window. Only when I show the description in mobile does it reappear on desktop. How can I fix this issue?
Javascript:
//Script
<script>
$(document).ready(function () {
$(".toogle-button").click(function () {
$(".toggleholder").slideToggle("slow");
$(this).find("i").toggleClass("fa-chevron-down");
});
});
</script>
Html:
//html
<div class="toogle-button">Introduction<i class="pull-right fa fa-chevron-up fa-chevron-down"></i></div>
<div class="toggleholder">
<div class="desc-holder">
<p>
<p><b>Subject:</b></p>
<span class="side-text">Design</span>
</p>
<p>
<p><b>Description:</b></p>
<span class="side-text">This quiz is to test your knowledge on HTML basic foundation.</span>
</p>
</div>
<div class="user-holder">
<p><b>Assigned By:</b></p>
<div class="profile-holder">
<div class="avatar-holder">
<img src="/include/images/default/avartar_32.png" class="avatar32" />
</div>
<div class="username">Admin Asriah Asadi</div>
<div class="clearfix"></div>
</div>
</div>
Css/Less:
.toogle-button {
display: none;
margin-top: 15px;
padding: 10px;
background-color: #055eac;
@media only screen and (max-width: @screen-xs-max) {
display: block;
}
}