This has a beautiful simple accordion example. Unlike other examples where panel-group was used, this uses the card with each card acting as an accordion. This contains the card header and card body. Take a look at the class used for header and body they define the collapsible feature. By default the first card is expanded, where are others are made false. The card-body is just defining the matter which would be displayed in the accordion. The accordion container is used to hold these set of cards, whose titles are visible but only one pane is visible at a time. The CSS styling has added extra look and transitions for this Accordion. This snippet is responsive and changes to the look to fit the screen size. You can easily use this sample to add a stylish look to your page.

This is best suited for a site on smaller devices. The accordion is seen in smaller screens, whereas the tabs are seen in larger screens. HTML is simple with the ordered list set in the tags. The CSS styling is set for each tag which gives a tab and accordion view as per the screens used to view the page. This behavior is given due to the CSS styling and javascript. The javascript takes care of activating and deactivating the tabs once click. It also gives an accordion kind of look by adding the active class when needed. The script is carefully written to enhance the responsive behavior in smaller screens. Display for smaller screens is taken by CSS file using @media screens. Each and every file has a responsibility well divided to make this snippet function. You can use this snippet for mobile applications.

Models are dialog box /popup that is displayed on top of the current page. This can be used to show any important message or any information. This snippet is an example of showing more information on the clicked object. It is a simple example of buttons to show the model. Here the buttons are having the image out planets and styled using CSS. A click on any button or image displays model with the information of planets. To open the model set the data-target to model to be opened. To create a Model you need to define the model class with a dialog containing, header, body, and footer if needed and id as a reference to a button click. A close button dismisses button can be seen at the bottom and at top of the model. You can use this snippet to display the information in dialogue in the form of Model. You can style the model accordingly.

This is a beautiful yet simple accordion created using Bootstrap 4. Your browser must support ES 6 in order to display this properly. You can see the accordion has a white background around the text. If you closely look at the code you can see, HTML code is simple and repetitive while CSS is very minimal. The biggest challenge is to write JavaScript code properly. One of the most noticeable code segment is the use of async and await. This accordion can be used on any website as a vertical navigation bar. You can expand the accordion by only by clicking the texts such as React. Accordion won’t be expanded if you click outside of the text within an accordion item. With slight modification to javascript, you can customize the accordion to behave in quite different ways.

This is a classic example of the responsive navigation bar with no javascript needed. It uses clean HTML5 markup. This navigation bar is aligned to left but can be aligned to center or right. In mobile devices, the navigation bar is set on the top with the logo displayed whereas on the website it’s displayed on the left of the device. Toggling behavior can be seen by clicking on the toggle button. The dropdown is already set for some menu. The icon for each menu is set. CSS file defines responsive behavior using a media query. Navbar on the screen of width above than 767px will be displayed as block align to left, whereas for the screens below 767px the navigation bar will be displayed on the top of the page. Use this navigation bar for mobile applications to navigate to your custom links.

This is a stylish example of Navbar for social networking sites or web portal. It uses styles and scripts in the header part of the page. The navbar has an elegent color with other items like “followup”, “Collaborations”, “Media” with dropdown option to collect “Facebook” and Instagram. Navbar is placed in the body of HTML which acts as a container. Nav is decorated with classes like mb-4 for setting the margins of the bottom side and navbar-expand which gives the ability to expand and set the desired color in the navbar. Using navbar-brand the brand name of the company is set, you can go ahead and place a logo of a company. Median displays a drop-down: check out the nav-item dropdown class used to create links. This bar has a CSS style which sets the styles for classes. Tweak this code to add it in your webpage of social networking sites.