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 » Tutorials » Making Show/Hide Content

Goto page : 1, 2  Next

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

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

Unknown Data


Registered Member
Registered Member

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

2Accespted Re: Making Show/Hide Content on Fri May 21, 2010 7:39 am

ankillien


Administrator
Administrator
Hi Unknown Data!

So, its like a show/hide content, right?

Why are you using the Forumotion classes like "gen" and "postbody"? Please remove they since they are not useful anywhere else bu on forumotion.

One more thing, this part...
Code:
<script src="http://illiweb.com/fa/js_16/collapsible_faq.js"></script>


You should not provide URL of script hosted at illiweb.com. Instead, just ask readers to upload the script to their host and put its URL in the <script> tags because the link http:/illiweb.com/fa/js_16/collapsible_faq.js will not work if illiweb.com moves/removes the file!

Please make these changes and this tutorial will be accepted Very Happy

3Accespted Re: Making Show/Hide Content on Fri May 21, 2010 6:04 pm

Unknown Data


Registered Member
Registered Member
Yay I mean a show/hide content.

I have changed it a little bit, and know it should work it better out.
And i should also work on other places than forumotion.

Hope it work. Smile

http://www.sjovfakta.dk

4Accespted Re: Making Show/Hide Content on Fri May 21, 2010 9:06 pm

ankillien


Administrator
Administrator
Looks much better Very Happy

Congrats, your tutorial has been accepted.
Thank for your valuable contribution Very Happy

Tutorial Accepted

5Accespted Re: Making Show/Hide Content on Sat May 22, 2010 7:00 am

Krazy


Registered Member
Registered Member
Can you make an example available somewhere also?

6Accespted Re: Making Show/Hide Content on Sat May 22, 2010 11:26 am

ankillien


Administrator
Administrator
Link to the demo page added to the first post Very Happy

7Accespted Re: Making Show/Hide Content on Sat May 22, 2010 2:52 pm

latchy


Registered Member
Registered Member
Lol.

I was going to propose a tutorial about this but it's slightly different...

http://www.graphiccentral.org/

8Accespted Re: Making Show/Hide Content on Sat May 22, 2010 8:20 pm

Joel


Registered Member
Registered Member
awesome! Great tutorial dude!

http://www.advertisehotspot.info/

9Accespted Re: Making Show/Hide Content on Wed May 26, 2010 8:43 am

Russel


WebArtz Moderator
WebArtz Moderator
It isn't new for me but then it's great.

Congratulations!


_________________





No Support Via PM
http://facebook.com/russelpuge

10Accespted Re: Making Show/Hide Content on Sun Oct 24, 2010 2:56 am

McStormify


Registered Member
Registered Member
Can you add the CSS for the blue box?

11Accespted Re: Making Show/Hide Content on Mon Oct 25, 2010 12:39 pm

ankillien


Administrator
Administrator
Yes, you can. Add the style="" attribute inside the div tag.

12Accespted Re: Making Show/Hide Content on Sat Oct 30, 2010 4:31 am

verrell123


Registered Member
Registered Member
Congratulations!

http://graphicholdine.forumid.net/

13Accespted Re: Making Show/Hide Content on Sun Oct 31, 2010 3:20 pm

Plancker


Registered Member
Registered Member
Can you create it so that i f you click one an then the second the firts one closes again?

14Accespted Re: Making Show/Hide Content on Sun Oct 31, 2010 6:37 pm

ankillien


Administrator
Administrator
Yes, it can be done. It would require some modification to this script.

15Accespted Re: Making Show/Hide Content on Wed Nov 03, 2010 8:47 pm

Plancker


Registered Member
Registered Member
Can you pleas give me a code and how to install

16Accespted Re: Making Show/Hide Content on Wed Nov 03, 2010 9:53 pm

ankillien


Administrator
Administrator
Here is a good tutorial...
http://www.switchonthecode.com/tutorials/javascript-and-css-tutorial-accordion-menus

Here is another one...
http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-accordion/javascript-accordion.html

17Accespted Re: Making Show/Hide Content on Thu Nov 04, 2010 5:45 am

Plancker


Registered Member
Registered Member
How do i upload Javascript to my own forum?

18Accespted Re: Making Show/Hide Content on Thu Nov 04, 2010 9:16 am

ankillien


Administrator
Administrator
You need to upload it to a web host or you can create an HTML page on your forum and copy-paste the javascript in it.

19Accespted Re: Making Show/Hide Content on Thu Nov 04, 2010 10:02 pm

Plancker


Registered Member
Registered Member
oh like that and i can just type in "/javascript-h7.htm" for example

20Accespted 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.

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

Goto page : 1, 2  Next

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Making Show/Hide Content

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