Responsive Flexbox Accordion With CSS jQuery | Flex Box Accordion

How we can create a flexbox based accordion using HTML CSS JS? Solution: See this Responsive Flexbox Accordion With CSS jQuery, Flex Box Accordion.

Previously I have shared some accordion related programs, but this accordion design is based on flexbox layout. Basically, accordion is a kind of collapsible function it contains only heading or title, later it reveals all content on click. Mostly we use accordion for FAQ and specification sections. There use places many contents in less space because accordion opens only a single panel at a time.

Today you will learn to create a FlexBox Accordion. Basically, there is accordion with a title, some dummy text, and 4 accordion or collapsible items. There each item contains an image, a title, and some dummy text when its reveal. On the desktop, you will see 2 items in a row, and on the mobile or small screen, you will see one after one list-wise. And it has a toggle feature, items will open and close on clicks.

So, Today I am sharing Responsive Flexbox Accordion With CSS jQuery. There I have used HTML to create the layout, CSS for styling and animation, jQuery for functioning. There I have created 2 separate sections for desktop and mobile view. This is a cool accordion design with images, you can replace images with icons. You can use this program on your website after making content changes.

If you are thinking now how this flex box accordion actually is, then see the preview given below.

Preview Of Flex Box Accordion

See this video preview to getting an idea of how this responsive accordion design looks like.

Now you can see this program visually, also you can see it live by pressing the button above. If you like this, then get the source code of its.

You May Also Like:

• Responsive Table Detail View
• Material Color Picker
• Folding Select Dropdown
• Multi-Level Accordion Menu

Responsive Flexbox Accordion Source Code

Before sharing source code, let’s talk about it. There I have created two main divs name containers and 2 other additional class names. There I have created two different sections for desktop view and mobile view. Inside these two divs, I have placed the same elements with the same class names. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. First I gave display: none; values to the mobile version of the element, and in @media query I gave none display to the desktop version. In other words, on a small screen, the mobile version layout will active and on a large screen desktop version will active.

jQuery handling here the toggle item reveal and hide feature in this program. At first, it will hide the content and it detects the click using .click(function ()) command and open/close the items. There I have used if{} else{} statements and declared the conditions. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put the codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Responsive Flexbox Accordion With CSS jQuery, Flex Box Accordion Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.