Berrypro : shortcodes for accordion

By cococom64 on Mon, 03/05/2018 - 11:26
Forums: 
Paid Theme Support

Hello,
I would like displaying an accordion page with every accordion in active default position.
As this is not the layout of the 4 scheduled types, could you give me a help for achieving this aim ?
Thanking you in advance,
Best regards

Comments

user
Submitted by admin on Mon, 03/05/2018 - 14:33

would you like to try toggle with every section active??
By default every section is closed in toggle.
http://demo.drupar.com/berrypro/toggle

When user clicks on any toggle title, its content will hide.
If that can work for you, I can give you the modified code.

user
Submitted by cococom64 on Tue, 03/06/2018 - 16:54

Hello,
I would be pleased if you could give me the modified code as toggle will be also a good way of display content.
Thanking you in advance,
Best regards

user
Submitted by admin on Sat, 03/10/2018 - 02:59

1)Open
js/custom.js

2) Find following codes.

/*----------------------------------------------*/
/*	Toggle
/*---------------------------------------------*/
	jQuery(".toggle .toggle-content").hide();
	jQuery(".toggle .toggle-title").click(function() {
		jQuery(this).next('.toggle-content').slideToggle(300);
		jQuery(this).toggleClass('active-toggle')
		return false;
	});

3) Replace above code by following codes

/*----------------------------------------------*/
/*	Toggle
/*---------------------------------------------*/
	jQuery(".toggle .toggle-title").click(function() {
		jQuery(this).next('.toggle-content').slideToggle(300);
		jQuery(this).toggleClass('active-toggle')
		return false;
	});

4) Use following format to create toggle content

<div class="toggle">
<h3 class="toggle-title active-toggle">Lorem ipsum dolo</h3>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus.</div>
</div>
      
<div class="toggle">
<h3 class="toggle-title active-toggle">Lorem ipsum dolo</h3>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus.</div>
</div>
      
      
<div class="toggle">
<h3 class="toggle-title active-toggle">Lorem ipsum dolo</h3>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec risus neque, eget sagittis est. Nulla eget libero ligula, ac scelerisque sapien. Donec sit amet sapien purus, sit amet tristique nisi. Fusce non sapien sapien. Aenean vel felis lectus.</div>
</div>
user
Submitted by cococom64 on Mon, 03/12/2018 - 09:04

Hello,
Thank you for giving me the modified code.
That works perfectly well.
Best regards,
Corinne