Problem with jQuery accordion

Get Started
1

I did a visual for a client using the jQuery Accordion I had seen at Web Designer Wall http://www.webdesignerwall.com/demo/jquery/accordion2.html

Here is the visual http://robcubbon.com/dev/usunlocked/how-it-works-6.html

I did this just by putting an image within a <p> tag. The accordion is set to hide and display the <p> tag when one of the <h3> tags is clicked.

Trying to turn the images into HTML has proved problematic as there are three different columns of text.

I’ve tried putting a table inside the <p> tag which didn’t work. I’ve also tried to make the <table> disappear and reappear by amending the JavaScript in the header:

<script type="text/javascript"> 
$(document).ready(function(){
 
 $(".accordion2 h3").eq(0).addClass("active");
 $(".accordion2 table").eq(0).show();
 
 $(".accordion2 h3").click(function(){
 $(this).next("table").slideToggle("slow")
 .siblings("table:visible").slideUp("slow");
 $(this).toggleClass("active");
 $(this).siblings("h3").removeClass("active");
 });
 
});
</script>

That didn’t work either.

Can anyone suggest a way I might be able to add different columns of text within the separate panels of this jQuery accordion?

2

Hi robcub. You were pretty well on track there. But I would use inner divs rather than a table.

I just knocked up a little sample page to demonstrate this. Copy the code below and save it as a .html file and open it in your browser to see it in action. Just be sure to link the jquery file to it.

The CSS could possibly be a bit simpler, but this is a very simple and effective solution.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 2</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	
	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 div.cont").eq(2).show();

	$(".accordion2 h3").click(function(){
		$(this).next("div.cont").slideToggle("slow")
		.siblings("div:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});
</script>

<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion2 {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
	background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion2 h3:hover {
	background-color: #e3e2e2;
}
.accordion2 h3.active {
	background-position: right 5px;
}
.accordion2 div.cont {
	background: #f7f7f7;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
	display: none;
        overflow: hidden;
}

.accordion2 div.cont div.inner {
        float: left;
        width: 28%;
        padding: 0 2%;
}

.accordion2 div.cont div.inner p {
        margin: 5px 0;
        padding: 0;
}
</style>
</head>

<body>

<div class="accordion2">
	<h3>Question One Sample Text</h3>
	<div class="cont">
                <div class="inner">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
		</div>
		<div class="inner">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
		</div>
		<div class="inner">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>	
		</div>
        </div>
	<h3>This is Question Two</h3>
	<div class="cont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
	<h3>Another Questio here</h3>

	<div class="cont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
	<h3>Sample heading</h3>
	<div class="cont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
	<h3>Sample Question Heading</h3>
	<div class="cont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>
</div>

</body>
</html>
3

I haven’t styled it up but I’ve literally just pasted what you’ve done there, Ralph, and it works an absolute treat! You really are a star, thank you for that. You even went to the trouble of styling the three columns, amazing!

Here’s proof that it works:
http://robcubbon.com/dev/usunlocked/how-it-works-7.html

Thank you, thank you, thank you

4

You’re most welcome, robcub. Glad it achieved what was needed! Thanks for the feedback. :slight_smile: