• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

According

  2. Ui Kits
  3. According

Simple Accordion

Using the .accordion class to expand/collapse to accordion content.

Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.

Search engine optimization: Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.

Mobile responsiveness: Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.

Improved sales:Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.

The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:

  • --> Layout
  • --> Images
  • --> Visual hierarchy
  • --> Color scheme
  • --> Typography
  • --> Navigation
  • --> Readability
  • --> Content
<div class="accordion dark-accordion" id="simpleaccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed accordion-light-primary text-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What do web designers do?<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>Web design<em class="text-danger"> identifies the goals</em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements. </p>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="left-collapseTwo">What is the use of web design? <i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p class="mb-3"><strong> Search engine optimization: </strong> Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.</p>
<p class="mb-3"> <strong> Mobile responsiveness:</strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.</p>
<p class="mb-3"><strong> Improved sales:</strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.</p>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="left-collapseThree">What are the elements of web design?<i class="iconly-Arrow-Down-2 icli ms-auto icon"> </i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:</p>
<ul class="d-flex flex-column gap-2 accordions-content">
<li>--> Layout</li>
<li>--> Images</li>
<li>--> Visual hierarchy</li>
<li>--> Color scheme</li>
<li>--> Typography</li>
<li>--> Navigation</li>
<li>--> Readability</li>
<li>--> Content</li>
</ul>
</div>
</div>
</div>
</div>

Flush Accordion

Add .accordion-flush to remove the default background-color, border, etc.

  • --> Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.
  • --> It is absolutely free to download and use.

  • First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started.
  • One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure. Its files are compiled for easy access, and it only requires basic knowledge of HTML, CSS, and JS to modify them.
  • You can also use themes for popular content management systems as learning tools. For example, most WordPress themes were developed using Bootstrap, which any beginner web developer can access.
  • To increase the site's page load time, Bootstrap minifies the CSS and JavaScript files. Additionally, Bootstrap maintains consistency across the syntax between websites and developers, which is ideal for team-based projects.

  • Bootstrap handles the image display and responsiveness with its predefined HTML and CSS rules.
  • Adding the .img-responsive class will automatically resize images based on the users' screen size. This will benefit your website’s performance, as reducing image sizes is part of the site optimization process.
  • Bootstrap also provides additional classes like .img-circle and .img-rounded, which help to modify the images' shape.
<div class="card-body">
<div class="accordion accordion-flush dark-accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed text-success accordion-light-success active" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">What is bootstrap?</button>
</h2>
<div class="accordion-collapse collapse show" id="flush-collapseOne" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-1 accordions-content">
<li>--> Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.</li>
<li>--> It is absolutely free to download and use. </li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed text-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Why Should You Use Bootstrap? </button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseTwo" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started.</li>
<li>One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure. Its files are compiled for easy access, and it only requires basic knowledge of HTML, CSS, and JS to modify them.</li>
<li>You can also use themes for popular content management systems as learning tools. For example, most WordPress themes were developed using Bootstrap, which any beginner web developer can access. </li>
<li>To increase the site's page load time, Bootstrap minifies the CSS and JavaScript files. Additionally, Bootstrap maintains consistency across the syntax between websites and developers, which is ideal for team-based projects.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed text-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Bootstrap Image System</button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseThree" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>Bootstrap handles the image display and responsiveness with its predefined HTML and CSS rules.</li>
<li>Adding the .img-responsive class will automatically resize images based on the users' screen size. This will benefit your website’s performance, as reducing image sizes is part of the site optimization process.</li>
<li>Bootstrap also provides additional classes like .img-circle and .img-rounded, which help to modify the images' shape.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Multiple Collapse Accordion

Use href on data-bs-toggle attribute to show and hide multiple elements.

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
<div class="card-body">
<div class="common-flex"><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-warning text-white" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</div>
<div class="row d-flex">
<div class="col-xl-6">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary"><span>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.</span></div>
</div>
</div>
<div class="col-xl-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-warning"><span>This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.</span></div>
</div>
</div>
</div>
</div>

With Icons Accordion

Use icons with .accordion to give better look.

" This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls." or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)

  • You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.
  • Chat: Use when you prefer a dedicated chat experience and don't mind switching between different apps.

  • 1) Decide on the indentation and keep it that way.
  • 2) Make comments.
  • 3) Consistent name scheme.
  • 4) Don't repeat code.
  • 5) Avoid writing long code lines.
  • 6) Break down a big task into smaller chunks.
  • 7) Organize your program into smaller files.
  • 8) Write clever code that is also readable.
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne"><i class="fa-regular fa-bell"> </i>Keep in touch <i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseOne" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<p> <em class="text-danger"> " This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls."</em> or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"><i class="fa-regular fa-comment"> </i>Chats with others<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.</li>
<li> <strong> Chat: </strong> Use when you prefer a dedicated chat experience and don't mind switching between different apps.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"><i class="fa-regular fa-square-check"></i>Right way to code <i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>1) Decide on the indentation and keep it that way. </li>
<li>2) Make comments.</li>
<li>3) Consistent name scheme. </li>
<li>4) Don't repeat code.</li>
<li>5) Avoid writing long code lines.</li>
<li>6) Break down a big task into smaller chunks.</li>
<li>7) Organize your program into smaller files.</li>
<li>8) Write clever code that is also readable.</li>
</ul>
</div>
</div>
</div>
</div>

Outline Accordion

Set border outline with accordion using .accordion-wrapper class.

Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.

  • Search engine optimization: Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
  • Mobile responsiveness: Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.
  • Improved sales:Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.

  • The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
  • --> Layout
  • --> Images
  • --> Visual hierarchy
  • --> Color scheme
  • --> Typography
  • --> Navigation
  • --> Readability
  • --> Content 
<div class="accordion dark-accordion" id="outlineaccordion">
<div class="accordion-item accordion-wrapper accordion-left-border">
<h2 class="accordion-header" id="outlineaccordionone">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseOne" aria-expanded="true" aria-controls="left-collapseOne">What do web designers do?<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="left-collapseOne" aria-labelledby="outlineaccordionone" data-bs-parent="#outlineaccordion">
<div class="accordion-body">
<p>Web design<em class="text-danger"> identifies the goals</em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.</p>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper accordion-left-border">
<h2 class="accordion-header" id="outlineaccordiontwo">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseTwo" aria-expanded="false" aria-controls="left-collapseTwo">What is the use of web design?<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="left-collapseTwo" aria-labelledby="outlineaccordiontwo" data-bs-parent="#outlineaccordion">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li><strong> Search engine optimization: </strong> Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.</li>
<li> <strong> Mobile responsiveness:</strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.</li>
<li> <strong> Improved sales:</strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper accordion-left-border">
<h2 class="accordion-header" id="outlineaccordionthree">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseThree" aria-expanded="false" aria-controls="left-collapseThree">What are the elements of web design?<i class="iconly-Arrow-Down-2 icli ms-auto icon"> </i></button>
</h2>
<div class="accordion-collapse collapse" id="left-collapseThree" aria-labelledby="outlineaccordionthree" data-bs-parent="#outlineaccordion">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:</li>
<li>--> Layout</li>
<li>--> Images</li>
<li>--> Visual hierarchy</li>
<li>--> Color scheme</li>
<li>--> Typography</li>
<li>--> Navigation</li>
<li>--> Readability</li>
<li>--> Content </li>
</ul>
</div>
</div>
</div>
</div>

Horizontal Accordion

Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.

The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">Toggle width collapse</button>

Collapse Accordion

Use a link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<a class="btn btn-info" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
<button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>