[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Collapsible DIVs to Accodian

Posted on 2011-10-16
4
Medium Priority
?
166 Views
Last Modified: 2012-08-13
Hi Guys,

I have a site here

http://bit.ly/pWQnzy

and it uses collapsible divs, I would like to convert them to accordians with as little code change as possible, I can use JQuery or any plugins suggested


The existing code is in a loop (wordpress)

<div id="accordionHolder">
<div id="slideheader" class="slide" style="<?php echo($accStyle) ?>">
     <?php the_title(); ?>
</div>
<div class="slidecontent">content here</div>
</div>

Open in new window


The JS I use is

<script type="text/javascript">

			$(document).ready(function() {
				$(".slide").click(function () { 
				
				var symboltochange = $(this);
				var divtoaction = $(this).next('div');
				
				 if(divtoaction.is(":visible"))
				 {
					symboltochange.css("background-image", "url(<?php bloginfo('template_directory'); ?>/images/up.png)"); 
					divtoaction.slideUp("slow");
				 
				 }
				 else
				 {
					symboltochange.css("background-image", "url(<?php bloginfo('template_directory'); ?>/images/down.png)");
					divtoaction.slideDown("slow");
				 }

				});
			});

	
		</script>

Open in new window



Thanks

J










0
Comment
Question by:john_yourspace
  • 2
  • 2
4 Comments
 
LVL 15

Expert Comment

by:Eyal
ID: 36976968
see if you can use this...
http://docs.jquery.com/UI/Accordion
0
 

Author Comment

by:john_yourspace
ID: 36977085
How do I fit it to the existing code?
0
 
LVL 15

Accepted Solution

by:
Eyal earned 2000 total points
ID: 36977125
<div id="accordionHolder">
<?php
for ($i = 1; $i <= 10; $i++) {?>

<h3 style="<?php echo($accStyle) ?>"><a href="#"><?php the_title(); ?></a></h3>
<div class="slidecontent">content here</div>

<?php}

</div>

jQuery(document).ready(function(){
	$("#accordionHolder").accordion();
});

Open in new window

0
 

Author Closing Comment

by:john_yourspace
ID: 36977130
That works thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question