Accordian Display Issue

[Greg Rockwell]

Hello everyone;

I’m having trouble getting my accordians to display correctly. As you can see on the webpage below, the first accordian is folded up normally and expands when clicked, but the rest load already expanded, and won’t roll back up. Has anyone else run into the same issue/ have a helpful solution?

http://www.thrivedc.org/help/

Greg

AccordiansLavish.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi Greg Rockwell,

You have included accordians container(

) in wrong way. You have closed “

” at very first accordion so your are getting just first accordion folded.so please place it in following format to make all accordions folded.

  //start of accordian container
   
//first accordian title
		Section 1 Title Here
	
		
//first accordian content
			Section 1 Content Here
		
	
//second accordian title
		Section 2 Title Here
	
		
//second accordian content
			Section 2 Content Here
		
	---- and so on----
 
 
  [**Be sure to include  closing of container(
) at the last of all accordian title and content.**]

Note: Please backup your site before processing. So you will be in position to take action when disaster strikes.

[Greg Rockwell]

Hey, that’s great! That’s half the problem.

Now, can you help me keep my accordians in two columns? See the screenshot attached, but now I have one column, instead of two.

Important Numbers

How do I close the above html to keep two “6 section” columns across the screen?

Greg

AccordiansLavish2.jpg

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Hi there,

 

   

      //title
      //content
   
//clossing of  

 
 // closing of 


 

   

      //title
      //content
   
 //clossing of  

 
 // closing of 


and so on----

 closing of 

Note: You need to create separate id for each accordion eg: (lavish_accordion1,lavish_accordion2,lavish_accordion3……) and also need to make changes on Jquery respectively

[Greg Rockwell]

Wait, I thought “lavish_accordion1” was how they got the accordion with rounded edges?

And I’m sorry, I’m not sure what Jquery means?

[Sushil Adhikari]

Go to following directory: theme-folder->wp-content->themes->lavish-pro->js->lavish_extras.js.
In lavish_extras.js you will find following code where you need to add your accordion inside js selector.

$( "#lavish_accordion1" ).accordion({
      collapsible: true,
      active: false,
      heightStyle: "content"
    });

and finally your code should look like:

$( "#lavish_accordion1", "#lavish_accordion1","#lavish_accordion2","#lavish_accordion3","#lavish_accordion4").accordion({
      collapsible: true,
      active: false,
      heightStyle: "content"
    });

Note: please use child theme to add this customization, so your changes will not lost on theme update.

thanks

[Author]

Posts