Web Design Forums

philmetz · 15-02-2008, 03:52

Hi

Say i have a page in sections eg: Pictures, Music, Videos

How can i be able to expand and collapse each section so that it wont take much space on a page. Am not sure how to explain this properly so ill try a diagram below:

Pictures

Music

Videos

NOW - how can i make it so if i click Pictures for example it expands and shows every thing there without like loading a whole new page?
So something like this:

Pictures
bla bla bla bla
bla bla bla bla
bla bla bla bla
bla bla bla bla

Music

Videos

Thanks

philmetz · 15-02-2008, 08:43

I found this script but am not sure how I would edit it so that i can use it for 3 different expand and collapse menus. Is there anyone who can show me an example with that code?

<body>

Some text before

<div id=tbl name=tbl style="overflow:hidden;display:none">
<table border=1>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
</div>

some text after

<script language="JavaScript" type="text/javascript">

</script>
<br>
<a href="javascript:sizeTbl('none')">Hide</a>

<a href="javascript:sizeTbl('block')">Expand</a>

</body>

MikeMackay · 15-02-2008, 09:31

For this to work as you want with multiple tables or div's you'd need to send the id of the element that you wish to expand/collapse to the JavaScript function. That way you can use one function to control many elements by passing a reference to it.

- Mike

safe as milk · 15-02-2008, 09:40

you also need to decide if you want the one you've just expanded to close the previously expanded one or for the old one to stay open too

once you put in your divs, try ike something this blog.movalog.com/a/javascript-toggle-visibility/

Dusteh · 15-02-2008, 10:27

a job for moofx accordion if ever I saw one.

Mongoose · 15-02-2008, 15:02

You could it with nothing but css, except it wouldn't have any sliding animation. Stick each section in its own div and then use the :target pseudoclass to make each one pop into position when the header link is clicked.

philmetz · 15-02-2008, 17:07

Mongoose so the code i have is harder or more difficult then ur way?

pgo · 15-02-2008, 17:09

Always looking for the easy way out. Tsk, tsk.

This sort of thing is probably best handled with gracefully degrading JavaScript. That means, not putting event handlers inline in your HTML.

philmetz · 15-02-2008, 17:18

ok am going to give it a go even though i know no html and see what happens lol

Mongoose · 15-02-2008, 20:00

Quote:

Originally Posted by philmetz

Mongoose so the code i have is harder or more difficult then ur way?

Using css instead of javascript could make it faster/more streamlined, but in terms of difficulty, it may be a bit more complex, depending on your proficiency with css. Also, Internet Explorer doesn't support :target, so you may want to stick with your current implementation.

roto · 15-02-2008, 20:48

Quote:

Originally Posted by Dusteh

a job for moofx accordion if ever I saw one.

A nice on, that, Dusteh. I want to try to implement that somehow, some way in a future project. So smooooooooooooth...

Too bad it went largely ignored here.

Dusteh · 16-02-2008, 06:10

you can lead a horse to water but you can't make it drink

philmetz · 16-02-2008, 14:39

I am having trouble creating like three different expand and collapse menus. Could someone help me. Attached it one of them i could do.

thanks

philmetz · 16-02-2008, 17:34

Ok i got it working but could someone clean the html up for me please?

heres the code:

Code:

<meta name="generator" content="Namo WebEditor">
<body>

Some text before

<div id=tbl name=tbl style="overflow:hidden;display:none">
<table border=1>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
</div>

<p>some text after

<script language="JavaScript" type="text/javascript"><!--
function sizeTbl(h) {
  var tbl = document.getElementById('tbl');
  tbl.style.display = h;
}
// -->
</script>
<br>
<a href="javascript:sizeTbl('none')">Hide</a>
 
<a href="javascript:sizeTbl('block')">Expand</a></p>



<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Some text before</p>
<div id=tbl2 name=tbl2 style="overflow:hidden;display:none">
    <table border=1>
        <tr>
            <td>test</td>
        </tr>
        <tr>
            <td>test</td>
        </tr>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>
<p>some text after
<script language="JavaScript" type="text/javascript"><!--
function sizeTbl2(h) {
  var tbl2 = document.getElementById('tbl2');
  tbl2.style.display = h;
}
// -->
</script>
<br>
<a href="javascript:sizeTbl2('none')">Hide</a>
<a href="javascript:sizeTbl2('block')">Expand</a>
</p>
<p>&nbsp;</p>

</body>

15-02-2008, 03:52	#1 (permalink)
philmetz Registered User Join Date: Nov 2007 Posts: 72	expand and collapse Hi Say i have a page in sections eg: Pictures, Music, Videos How can i be able to expand and collapse each section so that it wont take much space on a page. Am not sure how to explain this properly so ill try a diagram below: Pictures Music Videos NOW - how can i make it so if i click Pictures for example it expands and shows every thing there without like loading a whole new page? So something like this: Pictures bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Music Videos Thanks

15-02-2008, 09:31	#3 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 836	For this to work as you want with multiple tables or div's you'd need to send the id of the element that you wish to expand/collapse to the JavaScript function. That way you can use one function to control many elements by passing a reference to it. - Mike __________________ Mike Mackay: Web Developer - LinkedIn - FutureTweets; Easily create and schedule your Twitter posts

15-02-2008, 10:27	#5 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 4,853	a job for moofx accordion if ever I saw one. __________________ unconsolidated isoparms

16-02-2008, 06:10	#12 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 4,853	you can lead a horse to water but you can't make it drink __________________ unconsolidated isoparms

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

15-02-2008, 08:43	#2 (permalink)
philmetz Registered User Join Date: Nov 2007 Posts: 72	I found this script but am not sure how I would edit it so that i can use it for 3 different expand and collapse menus. Is there anyone who can show me an example with that code? <body> Some text before <div id=tbl name=tbl style="overflow:hidden;display:none"> <table border=1> <tr><td>test</td></tr> <tr><td>test</td></tr> <tr><td>test</td></tr> </table> </div> some text after <script language="JavaScript" type="text/javascript"> <!-- function sizeTbl(h) { var tbl = document.getElementById('tbl'); tbl.style.display = h; } // --> </script> <br> <a href="javascript:sizeTbl('none')">Hide</a> <a href="javascript:sizeTbl('block')">Expand</a> </body>

15-02-2008, 09:40	#4 (permalink)
safe as milk Senior Member Join Date: Feb 2008 Posts: 151	you also need to decide if you want the one you've just expanded to close the previously expanded one or for the old one to stay open too once you put in your divs, try ike something this blog.movalog.com/a/javascript-toggle-visibility/

15-02-2008, 15:02	#6 (permalink)
Mongoose Senior Member Join Date: Oct 2007 Location: Olympia, WA Posts: 150	You could it with nothing but css, except it wouldn't have any sliding animation. Stick each section in its own div and then use the :target pseudoclass to make each one pop into position when the header link is clicked.

15-02-2008, 17:07	#7 (permalink)
philmetz Registered User Join Date: Nov 2007 Posts: 72	Mongoose so the code i have is harder or more difficult then ur way?

15-02-2008, 17:09	#8 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Always looking for the easy way out. Tsk, tsk. This sort of thing is probably best handled with gracefully degrading JavaScript. That means, not putting event handlers inline in your HTML.

15-02-2008, 17:18	#9 (permalink)
philmetz Registered User Join Date: Nov 2007 Posts: 72	ok am going to give it a go even though i know no html and see what happens lol

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)