[HTML] Show and hide forum description

Tutorial: Show and Hide forum description

When show is clicked, the forum description will appear. Then you can hide it again

--> Tutorials, tips and tricks <--
Show and Hide forum description

1º - Template
Change [ic]{catrow.forumrow.FORUM_DESC}[/ic] on [ic]index_box[/ic] to [ic]<span class="l_forumdesc" style="display:inline-block">{catrow.forumrow.FORUM_DESC}</span>[/ic]


2º - CSS

Code:

[panda=css].l_shownhide{
  clear: both;
  margin-bottom: 5px;
  font-weight: bold;
  cursor: pointer;
  display:inline-block;
  position:absolute
  background-color: #000;
  padding: 0 5px 0 5px;
}
.l_forumdesc{
  margin-left: 30px;
  background: whiteSmoke;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 2px solid #DDD;
  padding:3px;
}

Dark Forum

Code:

[panda=css].l_shownhide{
  clear: both;
  margin-bottom: 5px;
  font-weight: bold;
  cursor: pointer;
  display:inline-block;
  position:absolute;
  background-color: #fff;
  padding: 0 5px 0 5px;
}
.l_forumdesc{
  margin-left: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding:3px;
}

3º - Javascript
[Homepage only]

Code:

[panda=js]$(document).ready(function(){
$('.l_forumdesc').hide();
$('.l_forumdesc').before('<div class="l_shownhide">+</div>');
$('.l_shownhide').click(function(){
    $(this).text(($(this).text() === '-' ? '+' : '-')).next('.l_forumdesc').slideToggle();;
    e.preventDefault();
});
});

4º - Preview

After click of "+" button

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: Show and Hide forum description