WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Hiding and showing Profile Contents to save space

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

Dresdendoll


Registered Member
Registered Member
I've been looking all over for months for a tutorial on how to possibly hide and show all the contents below a member's title. Using a screenshot I took of Rusell's profile, how can I hide/show the info in his profile past the red bar? Forum version: phbb3



http://us.battle.net/wow/en/character/alterac-mountains/Dresdendoll/simple

Mr.Joker


Decorate Desktop Contest Winner
Decorate Desktop Contest Winner
I will look for you, supose its javascript Smile

Dresdendoll


Registered Member
Registered Member
Mr.Joker wrote:I will look for you, supose its javascript Smile


Thanks! I believe it's possible I just don't know how to do it. Here's a forum where I saw this feature from: http://k-of-d.forumotion.com/t604-hide-show-profile-info

http://us.battle.net/wow/en/character/alterac-mountains/Dresdendoll/simple

ankillien


Administrator
Administrator
Hi,

Try this javascript...

Code:
$(function(){
$('.postprofile dl dd:nth-child(4)').hide().before('<a href="#" class="toggle" style="padding:0 10px;">Toggle</a>');
$('a.toggle').click(function(){
$(this).next('dd').slideToggle();return false;
});});


Add it in your javascript code management for all pages.

magicm00n


Registered Member
Registered Member
The codes work fine but how do you replace "toggle" with an image?

ankillien


Administrator
Administrator
Replace this part...

Code:
<a href="#" class="toggle" style="padding:0 10px;">Toggle</a>


With this..

Code:
<a href="#" class="toggle" style="padding:0 10px;"><img src="IMAGE URL HERE" /></a>

magicm00n


Registered Member
Registered Member
Thankiuuuu! cheers

ankillien


Administrator
Administrator
You're welcome Smile

Solved | Locked

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

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Hiding and showing Profile Contents to save space

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