expanding and collapsing

**kovik** · Jul 2 '07, 11:43 PM

Simply switching between display: none and display: block will do exactly what you want, but it's JavaScript, not PHP. This isn't PHP's field.

**ak1dnar** · Jul 3 '07, 05:31 AM

Moving Thread from PHP forum – Ajaxrand

**Chrisjc** · Jul 3 '07, 04:35 PM

Originally posted by volectricity

Simply switching between display: none and display: block will do exactly what you want, but it's JavaScript, not PHP. This isn't PHP's field.

eh in that case I am really going to need some help I do not know a LICK of Java / ajax... could anyone be kind enough to help me out???

Would be greatly appreciated!

and sorry I figured this could be done VIA php as well...

**kovik** · Jul 3 '07, 10:51 PM

Originally posted by Chrisjc

and sorry I figured this could be done VIA php as well...

Yeah, but not on the same page request. The page would need to be reloaded.

And if you're not familiar with JavaScript, the sample code I could give you would do nothing for you. Everything I program is object-oriented (and the fact that the image controls the expansion simply screams that the whole of it should be an object).

You'd need to give the images references to the expandable boxes somehow, and then provide a 'click' event on the images that expands the box. This is a simple set up of it:

[code=javascript]var img = document.getEle mentById('foo') ;
img.expanded = document.getEle mentById('bar') ;
img.onClick = function()
{
if(this.expande d.style.display == 'none')
this.expanded.s tyle.display = 'block';
else
this.expanded.s tyle.display = 'none';
}[/code]

You'll need to set it up for every instance, so you may be interested in getElementsByTa gName, and possibly dynamically generating the JavaScript with PHP.

**Romulo NF** · Jul 4 '07, 07:10 PM

The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link

Stu Nicholls | CSS PLAY | 404 Error Page

http://www.cssplay.co.uk/menu/more_than#more

**Chrisjc** · Jul 6 '07, 08:14 PM

Originally posted by Romulo NF

The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link
http://www.cssplay.co.uk/menu/more_than#more

CSS?? Styles... I don’t think styling my page.. Which I already am doing is going to help me create a box that can expand and collapse by pressing a LITTLE + sign....

I know this might seem funny.. But check out the World of War craft website...

Error 404 - WoW

http://www.worldofwarcraft.com/index.xml

Join thousands of mighty heroes in Azeroth, a world of magic and limitless adventure.

Notice the menu bars on the left... see how they have PLUS signs... and if you click them they expand and show more stuff???

That is what I am looking to do but with a box that is about 400x200

And I tried playing with that code you provided but I got pissed off... I guess I don’t understand it.. well not I guess I don't.

**Chrisjc** · Jul 6 '07, 08:18 PM

Originally posted by Chrisjc

CSS?? Styles... I don’t think styling my page.. Which I already am doing is going to help me create a box that can expand and collapse by pressing a LITTLE + sign....

I know this might seem funny.. But check out the World of War craft website...

Error 404 - WoW

http://www.worldofwarcraft.com/index.xml

Join thousands of mighty heroes in Azeroth, a world of magic and limitless adventure.

Notice the menu bars on the left... see how they have PLUS signs... and if you click them they expand and show more stuff???

That is what I am looking to do but with a box that is about 400x200

And I tried playing with that code you provided but I got pissed off... I guess I don’t understand it.. well not I guess I don't.

Dang everything I just said you dont even need to go look at the WOW site... you can simply look in the Control Panel on here... (Your user account here at the top of thescripts)

and you will see a list of threads you are in... notice the little + at the top right of the box they are listed in.. you can collapes the box so nothing shows THAT is EXACTALLY WHAT I WANT lol

???

**Chrisjc** · Jul 6 '07, 08:45 PM

Originally posted by Romulo NF

The solution isnt always a script
You can do some good stuff learning a bit of css

Follow the link
http://www.cssplay.co.uk/menu/more_than#more

I looked at this some more and that is something I like by clicking more it expands... grate... but looking around some more I couldn’t find any tutorials or anything on how to make all this in CSS???

I didn’t think that was possible first off... and 2nd... if so where do I find some tutorials on how to make this stuff?? And what would I call it even if I was trying to search a site.... Or Google?

**Romulo NF** · Jul 8 '07, 12:53 AM

Originally posted by Chrisjc

I looked at this some more and that is something I like by clicking more it expands... grate... but looking around some more I couldn’t find any tutorials or anything on how to make all this in CSS???

I didn’t think that was possible first off... and 2nd... if so where do I find some tutorials on how to make this stuff?? And what would I call it even if I was trying to search a site.... Or Google?

I dont really got the problem man!
This site has lots of samples of stuff using css and you just need to look at the source and view how its done! The author itselfs tells that you can use the techniques!

Just get the working sample, copy it to an empty html, and try modifying it yourself! If you get stuck ask for help here!

**Chrisjc** · Jul 9 '07, 06:15 PM

Originally posted by Romulo NF

I dont really got the problem man!
This site has lots of samples of stuff using css and you just need to look at the source and view how its done! The author itselfs tells that you can use the techniques!

Just get the working sample, copy it to an empty html, and try modifying it yourself! If you get stuck ask for help here!

yeah but just copying it doesnt help me learn.. I figure there must be some kind of tut out there??? If not I guess I will just mess with it..

But thanks

**Romulo NF** · Jul 9 '07, 07:46 PM

Just get what is "important" in the styling and you will see its "easier" than you thought

Estructure:

Code:

<div class="holder">
already visible text<br>
already visible text<br>
already visible text<br>
already visible text<br>

<a class="hidden" href="javascript:void(0)"><span>more »</span>
	<em>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	</em>
</a>
</div>

Css:

Code:

.holder {width:120px; border:1px solid #ddd; background:#eee;}
a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
a.hidden em {display:none;}
a.hidden:hover {text-decoration:none;}
a.hidden:active em, a.hidden:focus em {display:block; background:#eee; color:#000; width:120px; position:absolute; left:-1px; top:0px; border:1px solid #ddd; border-width:0 1px 1px 1px;}

Explaning css:

1 -- set a class to the element that will "hold" everything... do whatever you need here (color, borders, width,e tc)
2 - autor is setting a class to a specific anchor. Position:relati ve is needed because this anchor will hold every hidden element (like the em and the rest of the text). Outline-style prevents a kind of "focus border" in firefox. Z-index is to stay above other elements in your page.
3 - force the elementl EM inside your specific anchor to be hidden
4 - removing normal effect of anchor to gain decoration
5 - display (block) the EM element when the element is clicked (:focus, :active).Set EM position to absolute so it can be "floating" freely over other elements in the page.

Thats basically it!

**homercavazos** · Sep 26 '07, 02:42 PM

Hi,
I love it. It works great. Only, have you had issues with Safari on a Mac? It expands, but it doesnt stay open. any ideas what's going on?

thanks.

Originally posted by Romulo NF

Just get what is "important" in the styling and you will see its "easier" than you thought

Estructure:

Code:

<div class="holder">
already visible text<br>
already visible text<br>
already visible text<br>
already visible text<br>

<a class="hidden" href="javascript:void(0)"><span>more »</span>
	<em>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	appear when clicked<br>
	</em>
</a>
</div>

Css:

Code:

.holder {width:120px; border:1px solid #ddd; background:#eee;}
a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
a.hidden em {display:none;}
a.hidden:hover {text-decoration:none;}
a.hidden:active em, a.hidden:focus em {display:block; background:#eee; color:#000; width:120px; position:absolute; left:-1px; top:0px; border:1px solid #ddd; border-width:0 1px 1px 1px;}

Explaning css:

1 -- set a class to the element that will "hold" everything... do whatever you need here (color, borders, width,e tc)
2 - autor is setting a class to a specific anchor. Position:relati ve is needed because this anchor will hold every hidden element (like the em and the rest of the text). Outline-style prevents a kind of "focus border" in firefox. Z-index is to stay above other elements in your page.
3 - force the elementl EM inside your specific anchor to be hidden
4 - removing normal effect of anchor to gain decoration
5 - display (block) the EM element when the element is clicked (:focus, :active).Set EM position to absolute so it can be "floating" freely over other elements in the page.

Thats basically it!

**Romulo NF** · Oct 11 '07, 12:51 PM

Hello,

I was just explaining the code, it wasnt me who created it
And unfortunately i dont have a mac to test the issues you found on safari

But i hope you can fix it and share the solution with us :)
Good luck

expanding and collapsing

expanding and collapsing

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment