Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Show and hide forum description



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  nanako

avatar
Punbb Guru
Punbb Guru


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



- 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]


- 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;
}


- 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();
});
});


- 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

Powered by PunBB
Currently 0 users have thanked nanako for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum