File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes expand and collapse buttons Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "expand and collapse buttons" Watch "expand and collapse buttons" New topic
Author

expand and collapse buttons

Sarathy Srinivas
Greenhorn

Joined: Jan 08, 2008
Posts: 7
I want some additional rows to be displayed on click of the expand button [+] and inturn collapse when the [-] collapse button is selected. I tried doing this using some crappy logic which coisisted of lots of code

Any easy simple way to do this? Examples would be helpful
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Once you locate the element to be expanded or collapsed, it's a simple matter of modifying its CSS display rule to none or display.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Justin Fox
Ranch Hand

Joined: Jan 24, 2006
Posts: 802
Yep,

I don't know what you want to "expand" and "un-expand", but if you just have
your info. in a div, you could just have a link ("[+]") and a link ("[-]"),
but have the [-] link "display:none" in the same spot as the [+] and also have the div "display:none" at first too.

and when ever the [+] is hit, just show the div, show the [-] and hide the [+].

if you have the div relative it will push everything down nicely.

Justin Fox

also, you might want to have the [+] and [-] populate the same little div,
by altering that div's "innerHTML".


You down with OOP? Yeah you know me!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Originally posted by Justin Fox:
if you have the div relative it will push everything down nicely.

Relatively positioning the element is not necessary. The default (static) will work just as well. Avoid absolute and fixed unless you know what they do.
also, you might want to have the [+] and [-] populate the same little div,
by altering that div's "innerHTML".

That's a bit more advanced. Let's stick to just hiding and showing for the moment.
Sarathy Srinivas
Greenhorn

Joined: Jan 08, 2008
Posts: 7
hmm..thanks for the replies..
i actually need to call info from the database .. will this div thing work for non-static data?
can some1 pls provide me with a link for gettin more info on 'div'
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Originally posted by Sarathy Srinivas:
can some1 pls provide me with a link for gettin more info on 'div'

Please use real words when posting to the forums. Abbreviations such as "some1" in place of "someone" only serve to make your posts more difficult to read and less likely to generate useful responses.

Please read this for more information.

thanks,
bear
JavaRanch sheriff
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

To get data from the server without making a page submit, you'll need to explore Ajax.
Justin Fox
Ranch Hand

Joined: Jan 24, 2006
Posts: 802
I would go visit W3Schools.com, they go over PHP or ASP and AJAX in good detail, and you can get an Idea of what to do to get your div to update it's self without a page refresh.

Justin Fox

p.s

when using ajax, you have to use a server-sided script to get and "echo"(php) or "Response.write()"(asp)

and you access this echo or response, also called responseText, by creating an xmlHttpResponse in javascript.

This is all I can explain without confusing you completely lol.

hope this leads you in the right direction

If you've read up on PHP,ASP or AJAX and have questions,
please post them.

and by the way, here is the link to 'div' that you asked for
div stuff



[ January 09, 2008: Message edited by: Justin Fox ]
[ January 09, 2008: Message edited by: Justin Fox ]
Sarathy Srinivas
Greenhorn

Joined: Jan 08, 2008
Posts: 7
Originally posted by Bear Bibeault:

Please use real words when posting to the forums. Abbreviations such as "some1" in place of "someone" only serve to make your posts more difficult to read and less likely to generate useful responses.

Please read this for more information.

thanks,
bear
JavaRanch sheriff


Point taken.


Justin Fox Thanks for the info and the link.
Sarathy Srinivas
Greenhorn

Joined: Jan 08, 2008
Posts: 7
i tried using your advise and used div tags for expanding and collapsing. However, i faced some problems.

Let me first explain what i tried to do:
1. I have defined the division that i need to expand/collapse in my servlet and put the content to be displayed as a placeholder.
The code in the servlet in brief:
public String getData{
//some code
StringBuffer strBuf= new StringBuffer();
strBuf.append("<a ID="xadv" href="javascript:Toggle(/"adv/")">[+]</a>
strBuf.append("<div id=/"adv/" style=/"display:none/">");
//more stuff appended
strBuf.append("/div")
return strBuf.toString();
}

hashTable.ReplaceTags[SOMEDATA]",getData);

part of HTML CODE:

<script language="javascript" type="text/javascript">
function Toggle(item) {
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);
if (visible) {
obj.style.display="none";
key.innerHTML="[+]";
} else {
obj.style.display="block";
key.innerHTML="[-]";
}
}
</script>

--------
Sadly, this is not working out. Can someone please explain what i am doing wrong and how to go about it.
Justin Fox
Ranch Hand

Joined: Jan 24, 2006
Posts: 802

strBuf.append("<div id=/"adv/" style=/"display:none/">");
//more stuff appended
strBuf.append("/div")


First, you need to use "\"" for putting a " in a string.
and you can use single quotes, for example:



And you have to end the each individual style attribute with ';'



and finally you have to enclose your '/div' with '<>'



and end every line of code with ';' also




and for this line of code.



you need to set the innerHTML to HTML, not plain text.
so if you want '[+]' in the div, do the following:



from what I can see everthing else looks ok.

Justin Fox
[ January 15, 2008: Message edited by: Justin Fox ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Originally posted by Justin Fox:
key.innerHTML = "<font>[+]</font>";

Be aware that the <font> tag is deprecated and should not be used.

you need to set the innerHTML to HTML, not plain text.

Plain text is valid HTML. There's no problem with setting innerHTML to plain text.
[ January 15, 2008: Message edited by: Bear Bibeault ]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: expand and collapse buttons