Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

expand and collapse buttons

 
Sarathy Srinivas
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Justin Fox
Ranch Hand
Posts: 802
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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".
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
To get data from the server without making a page submit, you'll need to explore Ajax.
 
Justin Fox
Ranch Hand
Posts: 802
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 802
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic