By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,678 Members | 2,658 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,678 IT Pros & Developers. It's quick & easy.

expanding and collapsing

Chrisjc
100+
P: 375
I am in need of an expanding and collapsing code… The goal is

To be able to click a PICTURE IMAGE and expand to show information

Reason for this is I have 3 TABLES of information of about

400x200… that I want to be able to expand to how much information I put in them…. Just need a code that will cut it off and then OPEN it…

So

++++++++++++++++++++++++++++++++++++++++++
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
+Information… Information… Information… Information… +
++++++++++++++++++++++++++++++++++++++++++

So there is my box. My issue is that the box has more info and I have 2 more boxes below that, that have a lot of info but I want the USER to be able to EXPAND the info INSTEAD OF SCROLLING IN THE BOX… and just be able to scroll down the PAGE then be able to click the image again and it go back to its normal size so if the box was

400x200 to start with and I need it to collapse to lets say 400x900 to display info how could I do this???

Another easy to way to explain this is just like Microsoft with the TREE concepts expanding and collapsing

This would be a grate help.

As I am not sure how to come about this.
Jul 2 '07 #1
Share this Question
Share on Google+
13 Replies


kovik
Expert 100+
P: 1,044
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.
Jul 2 '07 #2

ak1dnar
Expert 100+
P: 1,584
Moving Thread from PHP forum – Ajaxrand
Jul 3 '07 #3

Chrisjc
100+
P: 375
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...
Jul 3 '07 #4

kovik
Expert 100+
P: 1,044
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:

Expand|Select|Wrap|Line Numbers
  1. var img = document.getElementById('foo');
  2. img.expanded = document.getElementById('bar');
  3. img.onClick = function()
  4. {
  5.     if(this.expanded.style.display == 'none')
  6.         this.expanded.style.display = 'block';
  7.     else
  8.         this.expanded.style.display = 'none';
  9. }
You'll need to set it up for every instance, so you may be interested in getElementsByTagName, and possibly dynamically generating the JavaScript with PHP.
Jul 3 '07 #5

P: 54
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
Jul 4 '07 #6

Chrisjc
100+
P: 375
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...

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

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.
Jul 6 '07 #7

Chrisjc
100+
P: 375
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...

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

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

???
Jul 6 '07 #8

Chrisjc
100+
P: 375
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?
Jul 6 '07 #9

P: 54
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!
Jul 8 '07 #10

Chrisjc
100+
P: 375
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
Jul 9 '07 #11

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

Estructure:

Expand|Select|Wrap|Line Numbers
  1. <div class="holder">
  2. already visible text<br>
  3. already visible text<br>
  4. already visible text<br>
  5. already visible text<br>
  6.  
  7. <a class="hidden" href="javascript:void(0)"><span>more »</span>
  8.     <em>
  9.     appear when clicked<br>
  10.     appear when clicked<br>
  11.     appear when clicked<br>
  12.     appear when clicked<br>
  13.     appear when clicked<br>
  14.     appear when clicked<br>
  15.     </em>
  16. </a>
  17. </div>
  18.  
Css:
Expand|Select|Wrap|Line Numbers
  1. .holder {width:120px; border:1px solid #ddd; background:#eee;}
  2. a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
  3. a.hidden em {display:none;}
  4. a.hidden:hover {text-decoration:none;}
  5. 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;}
  6.  
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:relative 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!
Jul 9 '07 #12

P: 1
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.

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

Estructure:

Expand|Select|Wrap|Line Numbers
  1. <div class="holder">
  2. already visible text<br>
  3. already visible text<br>
  4. already visible text<br>
  5. already visible text<br>
  6.  
  7. <a class="hidden" href="javascript:void(0)"><span>more »</span>
  8.     <em>
  9.     appear when clicked<br>
  10.     appear when clicked<br>
  11.     appear when clicked<br>
  12.     appear when clicked<br>
  13.     appear when clicked<br>
  14.     appear when clicked<br>
  15.     </em>
  16. </a>
  17. </div>
  18.  
Css:
Expand|Select|Wrap|Line Numbers
  1. .holder {width:120px; border:1px solid #ddd; background:#eee;}
  2. a.hidden {color:#000; text-decoration:none; outline-style:none; position:relative; z-index:2;}
  3. a.hidden em {display:none;}
  4. a.hidden:hover {text-decoration:none;}
  5. 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;}
  6.  
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:relative 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!
Sep 26 '07 #13

P: 54
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
Oct 11 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.