expand/collapse, auto collapse when another para is expanded?

**Nausicaa7** · 09-12-2012 04:08 AM

So I have some code for an expand/collapse feature which is working at present, except there are several sections and the page gets very long and confusing when several are expanded. Does anyone know how I can add an auto collapse to these sections when another one is expanded?

I might have missed out a </div> or something when copying the code as I'm trying to just take the relevant bits, but it does work. My second question - does anyone know how I can make the text XXX activate the expand/collapse? In SEO terms, I'm trying to make each button and text, add XXX to the URL for ratings as you can see from the href (Obviously the headings aren't actually a line of 'X's).

I'd appreciate any help.

Here is the code I'm using:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<div class="cat-divider"></div>
<table style="width: 100%;">
<tbody>
<tr>
<td>
<h2><span style="color: #007CD7;"><a name="XXX" href="#XXX"><span style="font-size: 12pt;">XXX</span></a></span></h2>
</td>
<td align="right"><a href="#XXX"><input type="button" value="Expand/Close" onclick="return toggleMe('para1')" /></a></td>
</tr>
</tbody>
</table>
<div class="cat-divider"></div>
<div style="display:none" id="para1">

blah blah blah blah blah

<p><a href="#">[Top] </a></p>
<div class="cat-divider"></div>
</div>

**holyhttp** · 09-13-2012 08:52 PM

What's the point of having a hyperlink wrapping a button?
<a href="#XXX"><input type="button" value="Expand/Close" onclick="return toggleMe('para1')" /></a>

The button can receive click events and will prevent your page from jumping.
<input type="button" value="Expand/Close" onclick="toggleMe('para1')" />

If however you just want to add the "XXX" to the URL then there is not point in using a button

<a href="#XXX" onclick="return toggleMe('para1')" >Expand/Close</a>
Use CSS to style the hyperlink to look like a button if that's the visual effect you need.

**ZABI** · 09-14-2012 01:37 AM

try this http://www.p51labs.com/accordion/

**alan22** · 09-19-2012 09:23 AM

try this http://www.lajm-shqip.com
or this http://www.njoftime.lajm-shqip.com/

**Blanksy** · 11-15-2012 07:39 AM

I'm using the following code to expand/collapse.

I want to remove the two lines:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Basically, I don't want to call anything into the script. When I remove/edit them, the links can't be expanded. I'm new to this and would appreciate some help.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion(); });
</script></head><body> <div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Blah
</p> </div> <h3>Section 2</h3>
<div>
<p>
Blah
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
blah
</p>
<ul>
</ul>
</div>

**holyhttp** · 11-15-2012 09:04 AM

@Blanksy. You need to start a new thread to ask your question.
The rules in the forum prohibit one from jumping in an ongoing conversation to ask another question.
It appear you are new here, so I understand.
I would be happy to answer your question but you need to move your post and start a new thread.

Thread: expand/collapse, auto collapse when another para is expanded?

Thread Tools

Display

expand/collapse, auto collapse when another para is expanded?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions