Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using a class to expand and collapse a DIV when clicked

Status
Not open for further replies.
CharlieMike73

CharlieMike73

Programmer
May 17, 2002
120
US
Hi, I have a page listing a number of activity codes used by the employees to report their time worked. The page is intended to serve as a reference manual for how any given activity code is to be used and what work qualifies under that activity code. What I want to do is have the page load showing a button with the activity code number for it’s text and then the activity title to the side like below:
Code: 
| 123 | - SHIMMING

| 124 | - SEALING CRACKS

| 125 | - REPAIRING SURFACE
Then when you click on the | 123 | button, for example, the box expands and shows the detailed info for that activity and all the others remain collapsed.
Like so:
Code: 
| 123 | - SHIMMING
Includes all necessary labor, equipment, and materials used for placing asphalt mix, to restore distorted pavement surfaces to a desired shape, or to add strength. Includes costs for traffic control. Do not use for Hot Maintenance Mulch. See Activity 121.

| 124 | - SEALING CRACKS

| 125 | - REPAIRING SURFACE
If you click on the button again it collapses. I found a script to handle the expand/collapse (scriptaculous) but I don’t know how to make the OnClick action change from expand to collapse and back again.

Can someone help me with this… I’m an Oracle DBA so web programming is not really something I know much about.

I can post the PL/SQL code if that would help, but it may just confuse would-be helpers as it’s not typical HTML, but I can post any HTML snippets you provide into the PL/SQL code.

Thanks in advance
 
Sort by date Sort by votes
Since you really do need JS this would better suited for the forum216.

With that said, the simplest way to go about this would be to set your JS to check the state of the div that holds your text and act accordingly.

Code: 
<script type="text/javascript">
function toggle_div(divID){
var divObj=document.getElementById(divId);
 if(divObj.style.display=="" || divObj.style.display=="block"){
  divObj.style.display=="none"
 }
 else{ divObj.style.display=="block"; )
}

</script>
And in your html, just make sure your buttons pass the appropriate ID to the function
HTML: 
<input type="button" onclick="toggle_div('[red]div1[/red]');" value="Show more">
<div class="hidden_div" id="[red]div1[/red]">...</div>

<input type="button" onclick="toggle_div('[blue]div2[/blue]');" value="Show more">
<div class="hidden_div" id="[blue]div2[/blue]">...</div>

<input type="button" onclick="toggle_div('[COLOR=white green]div3[/color]');" value="Show more">
<div class="hidden_div" id="[COLOR=white green]div3[/color]">...</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thank you for your reply Phil, but can you please check the sample below as I am unable to get it to work and not being a web guy I dont know where the problem might be when using your example.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	function toggle_div(divID){
		var divObj=document.getElementById(divId);
		if(divObj.style.display=="" || divObj.style.display=="block"){ 
			divObj.style.display=="none"
		} else {
			divObj.style.display=="block";
		)
	}
</script>
</head>
<body>
<input type="button" onclick="toggle_div('div1');" value="Show more">
	<div class="hidden_div" id="div1">Showing Div1</div>
<input type="button" onclick="toggle_div('div2');" value="Show more">
	<div class="hidden_div" id="div2">Showing Div2</div>
<input type="button" onclick="toggle_div('div3');" value="Show more">
	<div class="hidden_div" id="div3">Showing Div3</div></body>
</html>

I did notice towards the end of your <script> section that you have a ), should it be a } as it appears that there is a } missing. I tried to change it but it still didnt work. Sigh!

Thanks again...
 
Upvote 0 Downvote
The problem is that the classname is always "hidden_div" which will apply even after you have changed the display value.


Test and toggle the classname between hidden rules or displayed rules

e.className ==


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
ChrisHirst said:
The problem is that the classname is always "hidden_div" which will apply even after you have changed the display value.
Click to expand...

No, sorry, that's wrong. The whole point of using JS is because you can overwrite the values. Setting the class is necessary and does not interfere with the JS at all.

The problems above stem from my just writing the code into the reply box without testing. There are many errors there that prevent it form working correctly, notably my double == (equal sings) when assigning values, and the use of the wrong variable in the getElementById function amongst other things. There was also an issue with the logic. In the revised code below I have reversed the display setting lines, so now it works correctly.

Anyway here's the revised code:
Code: 
<script type="text/javascript">
    function toggle_div(divID){
        var divObj=document.getElementById(divID);
		 if(divObj.style.display=="" || divObj.style.display=="none"){ 
		  divObj.style.display="block";
		} else {
		    divObj.style.display="none";
		      }
    }
</script>
<style type="text/css">



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
626
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
690
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
626
Mike Lewis
Mike Lewis
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
177
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
170
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top