An Accordion Menu is a fantastic tool that offers the advantages of a clean, ease-of-use design while maintaining all relevant information and details.
I’ve searched for a WordPress Plugin that enables a Drop-Down Accordion Menu.
When I discovered the Accordion feature in the Kadence Blocks – Gutenberg Page Builder Toolkit by Kadence WP, I incorporated it into my website the same day. Kadence Blocks – Gutenberg Page Builder Toolkit has numerous features.
In this post, we’ll create an Accordion Menu using the Accordion Block.
Accordion Menu Created using Kadence Blocks Plugin
How to Add an Accordion Menu in WordPress
When you open Kadence Blocks, you’ll see a variety of options. For this tutorial, we’re using the Option ~ Accordion, as displayed below.
Once you add the Accordion Block, you’ll see four Accordion Templates, as displayed below. All vary a little in design and function. You can choose any design.
Customizing the Accordion Block
In the block settings to the right, you’ll see the options: General, Style, and Advanced. Each option has its own drop-down menu. If you don’t see it, click on the Settings tab on the right of the Update/Publish tab.
I’ve customized my design using these options. I created four Accordion Panes.
Under General you can turn on the options: Panes Close When Another Opens and Start With All Panes Collapsed. These are demonstrated in my Accordion Sample above.
Under the Pane Title Trigger Icon tab, you can select and customize the Trigger Icon. I selected the up and down arrow.
Next, you can customize your design further using the features listed under the Style option.
The Advanced option offers numerous features, as well.
To edit the content within each Accordion Pane, just click on the Accordion Pane and enter your title, body text, etc. You’ll see that within each Accordion, you can add blocks.
In the image below, you can see I added a title, title icon, paragraph text, and included the text “Read More” which I then hyperlinked to the relevant content.
You’ll notice the side panel has changed. You can choose Title Icon Settings.
NOTE: To return to the General, Style, and Advanced options, click on the View Parent Block Settings.
And you’re done!
I love this feature in the Kadence Blocks – Gutenberg Page Builder Toolkit. Its ease of use and design are just what I was searching for. I hope this post proves helpful and meets your website design needs.
Have a tip you’d like to share? Please feel free to share in the comments below.
Until next time… happy creating, my friends! ♥
Free Download
Blogging Essentials Guide
After seven years of blogging, I thought I’d put together a Resource Guide with a list of essential tools and resources I use in hopes that it may prove helpful to fellow bloggers – newbies and/or not-so-newbies alike. After all, we’re always learning in this form of engagement. ♥
An excellent feature, Natalie. I have to think of where I may be able to apply it to my website. Now that I finally have it up and running, and am using Gutenberg regularly, I’m sure I’ll be tweaking and adding plug-ins and pages.
Your posts are always so helpful. I remember one where you presented snippets of book reviews, but I can’t recall if it was in a slideshow format or something else. That’s something I want to add to my new website, but I haven’t decided on a format. As I recall, you did an awesome job with it. Can you point me in the direction of that blog post? I poked around, but couldn’t find it. Thanks!
Cheers, Mae! Wonderful to hear the posts are helpful. Thanks for letting me know about the Testimonial blog post. I included the web link below. I had to tweak the Categories, but I wouldn’t have known otherwise. Big thanks for that!
Gutenberg is awesome and the Plugins we can use with it offer so much flexibility with design and functionality. Happy to help in any way. 🙂
https://natalieducey.com/2019/06/24/testimonial-carousal-a-win-win-marketing-approach/
Thank you, my friend! This is exactly the post I was looking for. I’m bookmarking it. I may not get to play with implementing it until I return from Maine, but I think it’s an awesome way to showcase testimonials/reviews.
Love your Gutenberg posts and thanks again!
Awesome, Mae! Hope you enjoy a fabulous vacation. Maine must be absolutely beautiful this time of year. Thanks again for your kind words. Cheers! 🙂
🙂
Very helpful Natalie and for those using Gutenberg and those with the facility to add plug-ins. hugsx
Thank you, Sally! I’m a Gutenberg fan and love the functionality of the Plugins that work with it. Many thanks for sharing, too! xo
So, you must be on the business plan with WP or self-hosted to use plug-ins. This just made that option more interesting to me. Thanks for the name of the plug-in, Natalie. <3
Cheers, Colleen! I tried the Business Plan, mainly to set up my WooCommerce Shop (Plugin), but I switched to self-hosted with Bluehost out of personal preference. I love the access to Plugins and can’t imagine not being able to access them now. Bluehost offers great pricing! I also use the Genesis Framework. I shared a blog post after I switched with reference to these tools. I included the link below, in case you’re interested. Happy to help in any way. 🙂
https://natalieducey.com/2019/05/14/essential-tips-tools-and-resources-for-bloggers-and-website-owners-%e2%99%a5/
Thanks for your help, Natalie. I’ve been mulling all of this over. I will have more questions, I’m sure. ❤️
Oooh. I like that Natalie. I’m still on the old editor, but this gives me the urge to switch to Gutenberg. I like the clean look and the ability to add so much without cluttering up the blog. Thanks for sharing your knowledge and research!
Diana, I think you’ll really like the new editor. There’s a learning curve, but it’s an exciting one! With the additional Plugins, it’s amazing what can be done with function and design. Happy to help in any way! 🙂
Thanks. I might set aside some time to learn it when I have the leisure, so I don’t panic. 🙂
I certainly didn’t know about this, Natalie – thank you so much. Another beautifully presented article. Toni
Thanks so much, Toni! Delighted to share these finds. There is so much at our fingertips with Gutenberg and Plugins. Happy creating! 🙂
Another great walkthrough with the fantastic new Gutenberg editor, Natalie. It really does make a difference to what we see when we load a blog post to read. The classic editor already looks so out of date compared to the layout that Gutenberg offers. As you can tell, I’m a big fan of the new editor, too.
Thanks, Hugh! It’s amazing to discover all that is at our fingertips. The Plugins that work with Gutenberg offer so many awesome, intuitive elements. My list of blogging ideas and topics is getting huge, and that’s just awesome. Thanks again for the encouragement and feedback. Cheers! 🙂
That’s a great feature to have. Thanks for sharing it Natalie:)
Most welcome, Denise. Thanks for stopping by today. Have a fabulous weekend! 🙂
Just at the early stages of getting to grips with the new Gutenburg option. Only frustration so far is editing images once they are inserted into the page. The accordion menu has lots of potential that I’ll explore further down the road so thanks for sharing your knowledge Natalie
Delighted to share. There is so much at our fingertips with Gutenberg and Plugins. It’s a learning curve for sure but well worth it. Thanks for stopping by and sharing. Cheers! 🙂
Your design expertise is shining through with posts like this one, Natalie! Well done, superstar 🙂
You’re so kind, Christy! Thank you. 🙂 I love passing along tips as I learn them. Cheers, my fellow Canadian blogger friend! 🙂
I am bookmarking this. I know the day will come when I switch to Gutenberg but it’s not here yet. This inches me a step closer.
Wonderful to hear, Jacqui! I love sharing these tips and hope they prove helpful to fellow blogger friends. Many thanks for dropping by today. Have a fabulous week! 🙂
Very informative and in-depth description here Natalie. I’m happy to not be using Gutenberg, lol, but I’m sure those that are, are very grateful for this. <3
Cheers, Debby! I hope you jump on board soon. I think you’ll be amazed with all that is at your fingertips. Its ease of use is much appreciated after the learning curve. Happy to help in any way! 🙂
Thanks for the offer Natalie. I’ll keep that under my hat for when I dare to endeavor, lol 🙂
Oh wow, this is fantastic! I thought of doing this ages ago but then I never did get around to sorting out my menus and creating separate pages. I hadn’t known how to do a drop down accordion design so this is really helpful – I’ll bookmark for future reference. Very thorough how-to that’s still easy to understand, you’re really good at it! 🙂
Caz xx
Thanks so much for your kind words, Caz! Delighted to know this post was helpful. More to come! May your day be a fabulous one. 🙂
Excellent tips as always, Natalie… I’m still not using Gutenberg, but saving and sharing this info! Thanks so much.
Thank you, Bette! I love sharing this tips and apprecate you sharing, too. Wishing you a lovely weekend! xo
Hi, Natalie. I saved the in my Inbox until I had time to study it. Fantastic tutorial! I pinned it for future reference!
That’s awesome, Jan! Thanks for stopping by and for sharing, too. Have a fabulous week! 🙂
Hi Natalie I checked out this post after you directed me here, but its not the same as the FAQ block I mentioned earlier on in your How to Upload a PDF File in WordPress for Viewing and Easy Download! post from what I can make out. Obviously I am not going to share a link here with you, but I used it on a number of occasions on my own blog as a test and its totally different from what you described here in this post. Basically you add a topic, you can also add an image, and then you add a link and when someone search on google for that term it may pick up your link and share it with your link pointing to a specific link on your blog. Not sure if what I am trying to describe here is clear enough.