How can I keep all accordion items that have been opened, open when you click on the next accordion item?
So the previously opened accordion item shouldn’t close when you click on the next item. You should be able to have all items opened and then close again when you click on an item.
I built a new version of this plugin if want a newer / updated version here is a link.
https://www.ads-software.com/plugins/modern-accordion-shortcode/
]]>Is it possible to have the accordion open on a rollover event rather than a direct click?
]]>I’ve suddenly lost all the formatting within my accordions.
Strange thing is it was working till recently and all the ones already set up work, but if I create a new one or edit an old one the formatting disappears and I can’t get it back.
Here is an example page I have created to demonstrate the problem – https://www.athe.co.uk/testings/
In this particular example I am trying to add bullets and I don’t know why the font is bigger than the body text on the rest of the website.
]]>It took me a bit to iron this out so I thought I would share it.
The author should add a attribute to have a title/hover so it can be changed via shortcode, but for those that want to add it now can do:
In accordian-shortcode.php line 131 change to
return str_replace("\r\n", '', '<div id="'.$id.'" class="accordions-shortcode" title="Click to toggle expand / collapse">'.do_shortcode( $content ).'</div>');change title to what ever you want.
for adding a icon to change from plus to minus on each section.
I use FontAwesome Site
there is a wp plugin in for it too at FontAwesome plugin there is a pdf with the numbers needed there also for the css.
here is the code for css with FontAwesome
.ui-accordion-header{
background-color:#507642; /*Background Color of Header*/
margin:5px 0 0;
}
.ui-accordion-header a{
padding:5px 12px;
background: #507645; /*Background Color of Header Link*/
color:#FFF; /*text color of link*/
display:block;
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header a:hover{
background-color: #507645; /*Hover Background Color of Link*/
color:#000; /*Text color on hover*/
}
/* Useing FontAwesome plus/minus signs when expanded/collapsed*/
.ui-accordion-header a:before {
color: #FF7C00;
content: "\f067";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right: 0.5em;
text-decoration: none;
}
/*toggle Useing FontAwesome plus/minus signs when expanded/collapsed*/
.ui-accordion-header.ui-state-active a:before {
color: #FF7C00;
content: "\f068";
font-family: FontAwesome;
text-decoration: none;
}
/**/
.ui-accordion-content{
padding:10px;
background-color:#ffffff;
border-style:solid; /*Border around drop down box (content section)*/
border-width:2px;
}I added colors and black text on hover too, that fit my theme
Hope you find this info useful.
Johnny
Hi,
Is possible close an opened window manually ?
my code is :
[vc_accordions style=”fancy-style” action_style=”accordion-action” open_toggle=”c” container_bg_color=”#fff”]
[vc_accordion_tab title=”Section”]Content[/vc_accordion_tab]
[/vc_accordions]
Thank you so much
Sara
I feel that the link inside of the header actually causes problems with usability without any concrete benefits as the link itself doesn’t actually open the accordion.
On my site, I have enabled a smooth scrolling when navigating between page sections using # anchors. This feature conflicts with the accordion causing the accordion to fail to open.
On all pages, clicking the link also hides the header from view. I feel the header should remain visible so I believe the id should be moved to the header rather than the content.
I am capable of provided source for the second fix, and possibly the first if you are interested in this update.
]]>Some accordion text solutions allow the user to collapse an expanded section. This plugin doesn’t seem to allow that, or am I missing something?
]]>I have created a template for a page and need to add accordian to each of the sections on the page as seen on the url below.
https://pmworldlibrary.net/pm-world-collection/
Accordians should start from the “PROGRAMME, PROJECT OR PORTFOLIO MANAGEMENT? *” section on down through the bottom of the page sections.
]]>Love this plugin. But as you know, when clicking more than one accordion can throw the user off especially if they were looking at an accordion section that is long.
Is there way to keep clicked accordions open until each specific one is clicked closed?
Appreciate any help! Thanks.
]]>Is there some way to use the jQuery scrollTop call? Or some other way to get a clicked on accordion’s header to go to the top of the page? Lots of content in an acoordion means the user can get lost in a page.
]]>hi!
Wanna change each title color…anyone can help?
Please?
best regards!
]]>Hi All,
Not the colours just the titles close to each other and the boxes pop open downwards.
Like this https://russianlengths.co.uk/faq-two
What I get now is this :-
https://livingnaturally.co/accordion-3
I guess it is on the classes somewhere.
Cheers,
John
]]>Hi, I tried this plugin on a site that I was working on. It works perfectly fine except I can’t get the arrows to show up. Is there a way to display the arrows?
]]>I am a NEWB when it comes to manipulating these sort of plugins. How would I change the text align, font face, and color of the accordion?
]]>Hello,
Since a few days the accordions are not working anymore. I’m helping a friend with his website. We have the plugin accordion shortcode with version 1.2.1. We think it might be because of some plugin updates that it is not working anymore or an update of the system.
I heard I would need to un check a box about javacript in wp ui but I don’t find that anywhere.
Do you guys have any idea what it could be ? We did not change anything in the code and here is an example of code
[accordions]
[accordion title=”La vie en parole et musique”]
Un air accessible à tous, agréable à tous [youtube]https://www.youtube.com/watch?v=Jchk-_KMlu4[/youtube]
Pour les a?nés : C”est beau la VIE de Jean Ferrat [vimeo]https://vimeo.com/19156282[/vimeo]
Pour les plus jeunes… pour qui la vie a du rythme [youtube]https://www.youtube.com/watch?v=H7rhMqTQ4WI[/youtube]
[/accordion]
[accordion title=”Droits et devoirs face à la vie humaine”]
[youtube]https://www.youtube.com/watch?v=rSulSzY2-qk&feature=related[/youtube]
[youtube]https://www.youtube.com/watch?v=mnC_LOmkWuY[/youtube]
[youtube]https://www.youtube.com/watch?v=OhPPS1b-jR0&feature=related[/youtube]
[/accordion]
[/accordions]
thank you
]]>How do I change the color on the accordions? The pink and blue are a little obnoxious in our color scheme (www.rockpointe.org/weddings).
Also, how do I change the font size?
Rookie here…any help would be much appreciated…thanks!
]]>Hi, I tried adding the accordion shortcode to both my page by both the visual tab and text tab. After that, when I go to my page which should have the inserted shortcode, I see no changes. When I go back to my text area and visual tab area, the shortcocde I pasted into there is missing. And I have pasted the shortcode in there multiple times and have hit the update button but no changes are seen except for the shortcode just being deleted, how can i fix this? Thanks
]]>I would like to post the accordion menu title to the URL if the accordion is open.
Here is the site I am working on https://sacto.org/doing-business-in-sacramento/key-industries/ and the effect I am looking for is if you select the accordion title “Advanced Manufacturing”… I would like it to open and push https://sacto.org/doing-business-in-sacramento/key-industries/#advanced-manufacturing to the url
Thanks so much!
]]>The code here:
$query_atts = shortcode_atts( array(
'autoHeight' => false,
'disabled' => false,
'active' => 0,
'animated' => 'slide',
'clearStyle' => false,
'collapsible' => false,
'event' => 'click',
'fillSpace' => false
), $attr);Needs to include the heightStyle: content as an option. Otherwise content overflows into other accordion items when the first accordion has a shorter content area than the succeeding accordion items. I have fixed it by adding the following to the accordion:
$query_atts = shortcode_atts( array(
'autoHeight' => false,
'disabled' => false,
'active' => 0,
'animated' => 'slide',
'clearStyle' => false,
'collapsible' => false,
'event' => 'click',
'fillSpace' => false,
'heightStyle' => 'content'
), $attr);We are trying to use this as a directory. Say, we have tab A-C and tab D-E, and under A-C in alphabetical order we have Company info 1, Company info 2, Company info 3,etc., and the same under D-E.
When they click A-C – it drops down and then when they click on Company info 1 – it drops down. Or, Company info 2 – it drops down.
Is there a shortcode where we can segregate the content Alphabetically like A-C, D-E, F-H, etc., and have other accordians below it that toggle open and closed?
]]>Today, I can link to a page with an accordion and with the URL have one of the items open.
What I can’t get to work correctly is clicking on a link within the same page (content) to expand an accordion (that is located in a sidebar).
]]>Hi, when I add a google map into the accordion it displays the map with the marker off to the left, offscreen. When added outside the accordion it displays correctly, any idea what might be causing this to happen? Many thanks for any advice!
]]>Hi
Great plugin, I’ve got two columns with accordions, all working fine but on the last 2 entries I’m getting an empty <p></p> below the h3. All the markup looks fine, any ideas on how I can remove them?
Since the last wordpress update (I think it came then), the accordions have a fixed size, and it has an ugly result : https://hyperbate.fr/homebook/index-des-menus/
Is there a way to correct this ?
hello
love ur plugin, thank you!
unfortunately it doesn.t work with Wysija Newsletter
any idea how to solve this problem?
ty
ll.
I am using a jQuery accordion shortcode on some page content, each having various sized content in each.
When I click one, is it possible to have the window of the screen align to the top of that header? A lot of times I’m on an area with a lot of content and click on one without a lot, the window will be way below any content.
Thanks
https://www.ads-software.com/extend/plugins/accordion-shortcode/
]]>I can change the css colors etc for ALL of the accordians to be the same background color, but I want to target specific accordians to change their background colors. I have tried changing the “new-class” etc, but I can’t get it to change.
any suggestions?
Thanks.
https://www.ads-software.com/extend/plugins/accordion-shortcode/
]]>Hi there,
I thought I had posted this last week but I can’t find my thread.
I want to change the background colour of the accordion items from grey to something else but can’t find where to change it.
Here is the sample site:
https://jettpsychologicalservices.com/test/
Can someone point me in the right direction?
Thanks
Tanya
https://www.ads-software.com/extend/plugins/accordion-shortcode/
]]>Hello!…I would like to see this work!
https://www.ads-software.com/extend/plugins/accordion-shortcode/
]]>