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

Goto page : Previous  1, 2

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

1Accespted Making Show/Hide Content on Thu May 20, 2010 8:30 pm

Unknown Data


Registered Member
Registered Member
First topic message reminder :


Making Show/Hide Content
Showing and hiding content on mouse click!



A very quick tutorial, to learn how to make a FAQ page on your site.
When clicking on the question, there fall a text down under the question.

Insert this code on page section, and redirect text with red.

<a onclick ="javascript:ShowHide('HiddenDiv_1')" href="javascript:;" >Question</a>
<div id="HiddenDiv_1" style="DISPLAY: none" >Answer</div>

<script language="JavaScript">function ShowHide(divId){if(document.getElementById(divId).style.display == 'none'){document.getElementById(divId).style.display='block';}else{document.getElementById(divId).style.display = 'none';}}</script>

Now note! If you want to put more questions on the site. You'll have to put the same code on again and redirect the red text agian. But! you also have to redirect the two red numbers, and they have to be same number.

<a onclick ="javascript:ShowHide('HiddenDiv_1')" href="javascript:;" >Question</a>
<div id="HiddenDiv_1" style="DISPLAY: none" >Answer</div>

<script language="JavaScript">function ShowHide(divId){if(document.getElementById(divId).style.display == 'none'){document.getElementById(divId).style.display='block';}else{document.getElementById(divId).style.display = 'none';}}</script>

That was it.

To see the demo of this code : Click Here
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Unknown Data on Fri May 21, 2010 6:04 pm; edited 2 times in total

http://www.sjovfakta.dk

21Accespted Re: Making Show/Hide Content on Fri Nov 05, 2010 7:37 am

ankillien


Administrator
Administrator
Yes, you can and if it doesn't work, add the full URL in the code.

22Accespted Re: Making Show/Hide Content on Fri Nov 05, 2010 3:08 pm

Plancker


Registered Member
Registered Member
thanks but when i add the code my background changes

23Accespted Re: Making Show/Hide Content on Mon Nov 08, 2010 7:06 am

Joel


Registered Member
Registered Member
Good one i'd say.

http://www.advertisehotspot.info/

24Accespted Re: Making Show/Hide Content on Mon Nov 08, 2010 11:55 am

ankillien


Administrator
Administrator
Plancker wrote:thanks but when i add the code my background changes


Where did you add the code?
Give me the link.

25Accespted Re: Making Show/Hide Content on Thu Nov 18, 2010 12:41 am

Plancker


Registered Member
Registered Member
i tried it here:

26Accespted Re: Making Show/Hide Content on Sat Nov 20, 2010 1:26 am

Plancker


Registered Member
Registered Member
he asks link i give link what's wrong?

27Accespted Re: Making Show/Hide Content on Sat Nov 20, 2010 7:26 am

Jophy


Registered Member
Registered Member
Sorry, I didn't noticed that, just re-edit your post.

(I need my eyeglasses No )

http://www.socialtechforum.com/

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

Goto page : Previous  1, 2

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