philbuchanan / Accordion-Shortcodes

A WordPress plugin that adds a few shortcodes to allow for accordion dropdowns.
https://wordpress.org/plugins/accordion-shortcodes/
16 stars 10 forks source link

Close button? #6

Closed kambanwait closed 10 years ago

kambanwait commented 10 years ago

Is there a way I can add a "close" button to the accordion? Not really an issue, but thought it's something that would be useful as there's no real clear indication, on the open content area, on how to close the content.

Thanks, will show you where I've got this working once it's live :)

kambanwait commented 10 years ago

I've added the following on a branch in my local branch:

Accordian.js: var allTitles = $('.accordion-title'), closeMe = $('span.close'), allPanels = $('.accordion-content').hide(), firstPanel = $('.accordion-content:first-of-type'), duration = 250, settings = { // Set defaults autoClose: true, openFirst: false, openAll: false, clickToClose: false, scroll: false };


function closeAll() { allPanels.slideUp(duration); allTitles.removeClass('open'); }; // Add event listener closeMe.click(function(){ // Close all accordion items if (settings.autoClose) { closeAll(); } }); allTitles.click(function() { // Only open the item if item isn't already open if (!$(this).hasClass('open')) { // Close all accordion items if (settings.autoClose) { closeAll(); } // Open clicked item


accordion-shortcodes.php: return sprintf('<%3$s class="accordion-title">%1$s</%3$s>

%2$sX
', $title ? $title : '' . __('Please enter a title attribute: [accordion-item title="Item title"]', 'accordion_shortcodes') . '', do_shortcode($content), $tag );

The class can then by styled with CSS, like the rest of the accordion

philbuchanan commented 10 years ago

Sorry, I've been away for a while. I'll look into adding this back into the main plugin in the coming weeks. I'm concerned with adding this as the default and overriding existing installs of the plugin, so I may add an additional setting to the opening [accordion] shortcode to display close buttons (similar to the other settings).