Dedicated content policy, review, and enforcement teams categorize and sweep content to protect your business. 2 Publisher Tools Publishers can manage content using editorial controls such as keyword filters, category selection, content promotion, and block capabilities. WordPress includes an import tool designed specifically for importing content from LiveJournal. In your WordPress site, select Tools Import on the left nav of the admin screen. Under “LiveJournal,” if you haven’t already installed the LiveJournal importer, click “Install Now.” Click the “Run Importer” link.
- Accordiondisplay Top Content On Your Website Builder
- Accordiondisplay Top Content On Your Website Hosting
- Accordiondisplay Top Content On Your Website Domain
- Accordiondisplay Top Content On Your Website Page
One of the great things about using WordPress to create your website is the ease of adding cool visual effects! And the effect I am going to teach you about today is called an “Accordion.” Now, remember, the first and foremost focus of your website is the content and communication to your potential clients (providing useful information, marketing your business, creating a community, etc.) rather than just making it look pretty. However, there are some effects that not only are nifty, but also actually help create a great user experience.
You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, to span the entire width of the page (100% width). Remember that buttons in W3.CSS are centered by default. Welcome to the official Fisher-Price® site! Shop our collection of baby gear and infant, toddler and preschool toys to find great gift ideas for any occasion. Easy Responsive Tabs is a simple jQuery plugin for quickly creating content Tabs which allow you organize larger groups of content into a tab interface. It will automatically turn the content Tabs into a content accordion for mobile devices.
For example, when you have a lot of content on your website, it can look a bit messy and unorganized when viewed on a small screen or mobile device. A good example of this would be a FAQ page. People typically visit your FAQ page to find an answer to their question, and you probably want to have a lot of information on that page to help them. However, if the FAQ is a simple long page that they have to spend time and scroll down, down, down… just to find the answer they are looking for, they might give up at some point and leave your site.
To solve that problem for better usability, I suggest that you consider using a function called an “Accordion.” It’s available as a plugin or in some modern themes.
(The “Divi” theme and its Magazine Style theme called Extra, (both my affiliate links) that I’m using for this website, both offer Accordion and Toggle fetaures, which you’ll see in the examples I share below.)
Accordion
An “Accordion” gives you a great way to display a lot of content in a limited space. Each Accordion item expands to display more content as you click on the plus sign. This allows users to see only the items they want to see.
Here is what Accordion items typically look like when first displayed on your site.
When you click on the second item, the second item opens up while the first item collapses.
By using an Accordion…
- you can maximize the space you have on your website.
- the content can be organized in a way that’s pleasing to the eyes.
- people click to see all the other answers
See why this can be great, especially for a page like your FAQ?
Difference between an “Accordion” and a “Toggle”
People often confuse “Accordion” with something called a “Toggle.”
In fact, a “Toggle” is pretty much same as an “Accordion,” with just one big difference. While each Toggle item collapses and expands just like an Accordion, a toggle allows multiple items to stay open at the same time.
When everything is closed, the toggle items below look the same as the Accordion items above.
But when you start opening each item by clicking on the plus sign to the right, each item opens up, and until you click on the minus signs, all open items STAY OPEN.
Once opened, each item will not collapse until you click on the minus sign to the right. Recall that you can open only one item at a time with Accordion?
I am using a Toggle Element on the FAQ Page of my Graphics Creation Workshop Program Enrollment Page. Go here to see that example.
Is Accordion better than Toggle or vice versa? It depends. You might want to use Toggle to let people open multiple items at the same time, or restrict how they can view the items by using Accordion. Just think which method would give your own website visitors a better experience before making a decision. It’s really just a personal preference.
Video on the Difference Between an “Accordion” and a “Toggle”
Watch this short video that visually shows you the difference I explained above in action!
5 Plugins to Create Accordions
If you don’t have a theme with an Accordion or Toggle built into it, you can simply add a plugin for that! Here are a few you may want to try out on your WordPress site. (Note that I have not used these plugins, but I found them and thought you might want to check them out for yourself)
1. Ultimate FAQ
Ultimate FAQ is a very customizable plugin that allows you to add an Accordion to your website with variety of styling options. This feature-rich plugin integrates with WooCommerce allowing you to have an FAQ section in your product page, lets you add a search function, and more.
2. Accordion
This plugin is super easy to use while offering very attractive designs. You can use its shortcodes to insert your Accordions anywhere on your site.
3. Easy Accordion
This one is another very intuitive Accordion plugin. Just by going though the steps presented in the plugin’s settings in the WordPresss admin panel, you’ll have your first Accordion in no time.
4. Accordion FAQ
Accordion FAQ plugin offers basic plugin features with simplicity. Its nice and clean designs can be easily jazzed up with different colors and Font Awesome icons.
5. Elementor Page Builder Plugin
Elementor is not specifically an Accordion plugin, instead it’s a very popular page builder plugin that includes an Accordion feature. If you don’t know what a Page Builder is, you can read my article here. You can also read more about the Elementor Plugin on their website here, or in WordPress.org’s plugin page here.
Toggle and Accordion in the Divi Theme
If you are using the Divi theme (my link for them), then this section is for you! It’s probably helpful to first know one more thing before using either an accordion or a toggle inside Divi.
Each Toggle item is actually a separate “module.” In the example above, “What is baking?,” “What is grilling?,” and “What is broiling?” are 3 separate modules, and that’s how each item can stay open or closed independent of other items.
An Accordion, on the other hand, groups all items in one module. Again using the example above, “What is baking?,” “What is grilling?,” and “What is broiling?” are all in one module.
Some examples of FAQ pages on live websites built with Divi can be viewed here. Get inspired!
If you are interested in the Divi theme or the Divi page builder plugin, check them out here. Another great page builder that also offers both an Accordion and a Toggle element is the Elementor Plugin. See above.
Are you already using an Accordion (or a toggle) on your WordPress website? I’d love to see that! Please share in the comment section below.
Accordion Menu provides a presentable interface for web site visitors to navigate through the content within a single page. This eliminates having to arrange multiple pages to display relevant contents on separate interface. You can built accordion menu to organize your contents grouping together the relevant contents over a single menu. Accordion menu features just like any tabs menu would displaying the content of particular menu. However, in accordion contents and menu are stacked together providing a beautiful design of hide and show effects. In this tutorial we will be building Horizontal Accordion menu with just HTML and pure CSS.
Now see there are lots of accordion designs that you could go for. And for that you can use several development approaches. For advanced features and broad applications use of Javascript or Jquery is an obvious choice, but in this tutorial we are keeping things simple and just restricting our development to pure HTML and CSS to built a horizonal accordion menu making effect use of the hover effect.
Okay! folks come on board. lets get our hands dirty with CSS and HTML to build an actual example of horizontal accordion menu.
HTML and CSS Horizontal Accordion Menu With Example
Lets understand a brief overview of what we are implementing. We will stack menu and content together side by side. Then by setting a minimum width just enough to show menu sections we will hide the content of the menu. Then with hover effect we will be increasing the width enough to display the content together with menu. Thats it. Seems easy ,right?? Okay! lets go on step by step.
Step 1: Building the Basic HTML Structure
Before building the HTML structure. first of all we will be linking CDN link of font-awesome to include some icons in our example. You can add icons from other sites like Google icons, iconicons, or wherever you prefer from. In this tutorial, I am going for font-awesome icons. So lets, add the following line in the head section of your HTML.
With that done, lets start by building a basic structure of HTML.
In the above structure, we have taken a list item and added some paragraph and icon from font awesome. The code should be self-explanatory even to beginners.
Complete Horizontal Accordion Menu HTML
With above basic structure understood. Other elements are just redundant multiplication of the above basic example. So below is the final complete HTML. The icons will be used for menu while content will be its relevant content which will be displayed when hovered over the icon.
The above complete HTML should render the following web structure.
Step 2: Adding Basic CSS
Accordiondisplay Top Content On Your Website Builder
Okay! Seems fair enough. We haven’t added any CSS so the mere HTML looks nothing like horizontal accordion menu. So yeah, from here on its all experiments.
The above CSS adds background to the page and arranges the heading to a proper position with better font styling.
Step 3: Horizontal Accordion Menu Stacking
As already mentioned for horizontal accordion menu, we will be manipulating the CSS property width of the content and menu to provide an interactive show and hide property. Since the width contains the overall content, I have pre-estimated our final content width and set the min-width of the accordion_menus element. With that set, the value of width that is 65% never yields a width less than 800px in any responsiveness. That is set because if the width of the horizontal accordion menu is less than the estimated width then some width jitter occurs. Try experimenting.
Then the width of the accordion element was set to 80px for now which isn’t enough to showcase the entire content but is wide enough to display the menu content. We will be increasing the size of width as we over over the menu just as we did for vertical accordion menu.
For now the content and menu gets stacked together if you view your web page.
Step 4: Separating each Accordion Menu Stacks
Okay! Coming to these point we have managed to set a minimum width of the accordion menu that further sets out to be a horizontal accordion menu. Now we want to increase the width of the menu as the icon is hovered on. So here we have it the hover effect.
Above CSS simply expands the width of the accordion. However still the contents seem to stack. We need to arrange the icon element and content element separately. Now by separation don’t get misled by tabs menu configuration where all menus are arranged together either horizontally or vertically depending upon the designs while contents are arranged together separately. While in accordion we are spearting the menu and content stack but they will be relatively positioned against each other. So, lets manipulate the content element CSS.
With above code, we successfully separated the content with menu just by adding a margin-left of appropriate value such that the width of the icon menu i.e. 80px + width of content i.e.360px + padding-left i.e. 10px would finally add up giving the width of 450px as set by the hover effect. This content and menu separation with width manipulation can be further depicted by following figure.
Step 5: Beautifying the Accordion Menu
It seems though, we have achieved the basic expand and collapse feature of the horizontal Accordion Menu with pure CSS coming to this point of tutorial. But the menu lacks a beautiful design, So lets experiment with designs.
The above CSS designs the icon’s specifications. The font-size is used to increase the size of the icon.
The above CSS seems pretty confusing to look at. But the ::before selector adds contents before the fab element while ::after selector adds content after the fab element. These additions will be needed for transitions. For now you can simply look at the CSS of ::before selector which simply sets the padding and positioning of the fab element. The ::before can be assumed as the positioning arrangment of the icon currently seen. Those are just a mere experimentation with pixels to align the icon centrally to our menu display.
Accordiondisplay Top Content On Your Website Hosting
Note: The use of content property in ::before and ::after selector is very important as it sets out what needs to be added to the selected elements before and after itself.
Step 6: Adding the “::after” Element
Accordiondisplay Top Content On Your Website Domain
In the above CSS we have added :after CSS and set its positioning and padding. But we haven’t added any content. So now lets add the contents.
Accordiondisplay Top Content On Your Website Page
In step 5, we added CSS for fabs class as they were common for all icons. But since each icons are different from one another for each item we have added individual unicode content resembling to the corresponding icon. The unicode was obtained from official font-awesome site. Since we haven’t set any content for ::before, its because the icon provided from the html structure serves its purpose.
Step 7: Transition Effect on Accordion Menu
Now Since we’ve added ::after contents for each different icons. The above CSS simply replaces the display of ::before content with ::after contents. By moving to way left the original content and moving the ::after content left till it is visible to display.
Complete Horizontal Accordion Menu CSS
If you have just scrolled down then for complete HTML portion, please look in step-1. The complete Horizontal Accordion Menu CSS for this tutorial is given below. You can just copy the HTML and CSS and that should work fine.
Conclusion
Accordion Menu system provides an interactive approach to organizing your contents. In this tutorial we have used pure HTML and CSS to build a beautiful example of horizontal accordion menu. From here, you could go on exploring further designs of accordion and development process. Though using CSS seem a basic simple implementation in major development fields, the use of JavaScript or jquery is recommended. Well, congrats you held through. That’s it for now!!