We help IT Professionals succeed at work.

jquery collapse / expand div

erikTsomik
erikTsomik used Ask the Experts™
on
I have a loop over coldfusion query. ANd I need to show each record and in the div show the content when i click on the header  and collapse it back as I clicked on the different header
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Check this code..
<html>
      <head>
            <title>Expand / Collapse</title>
            <script src="http://code.jquery.com/jquery-latest.js"></script>
            <style>
            	.divhead {
            		width:450px;
            		height:22px;
            		background: skyblue;
            		cursor: pointer;
            	}
            	.divcontent {
            		display:none;
            	}
            </style>
            <script>
            	$(function(){
            		$('.divhead').click(function(){
            			$('.divhead').next().fadeOut('slow');
            			$(this).next().fadeIn('slow');
            		});
            	});
            </script>
      </head>

      <body>
		<div id="count1">
			<div class="divhead">
				Record 1
			</div>
			<div class="divcontent">
				This is line 1 in Record 1<br />
				This is line 2 in Record 1<br />
				This is line 3 in Record 1<br />
				This is line 4 in Record 1
			</div>
		</div>
		<div id="count2">
			<div class="divhead">
				Record 2
			</div>
			<div class="divcontent">
				This is line 1 in Record 2<br />
				This is line 2 in Record 2<br />
				This is line 3 in Record 2<br />
				This is line 4 in Record 2
			</div>
		</div>
		<div id="count3">
			<div class="divhead">
				Record 3
			</div>
			<div class="divcontent">
				This is line 1 in Record 3<br />
				This is line 2 in Record 3<br />
				This is line 3 in Record 3<br />
				This is line 4 in Record 3
			</div>
		</div>
      </body>
</html>

Open in new window


keep the div count in the cfloop
Consider using an accordion - (code here).
Principal Systems Engineer
Top Expert 2005
Commented:
Is there any reason for not using cflayout functionality ?

e.g.

      <cflayout type="accordion" style="width: 500px;">
            <cfoutput query="qry">
            <cflayoutarea title="#title#">
                  <h1>#id# (#parentid#): #title#</h1>
            </cflayoutarea>
            </cfoutput>
      </cflayout>
erikTsomikSystem Architect, CF programmer

Author

Commented:
well that the whole idea. I do not want to use an accordion
That's a pity, what you orginally described matches accordion functionality.

Commented:
If you don't want to use accordion then you have to create your own on click event of headers and use toggle function of jquery or you can use hide() and show() functions of jquery...

It will work according to your requirement