Is it possible to use Bootstrap's Accordion or Alert styles with HTML elements <details> and <summary>?

For my projects, I typically utilize Bootstrap for styling and usually do not include any Javascript as it is unnecessary. However, I am now working on a project that requires a feature similar to Bootstrap's Accordion, which does require Javascript to function. Luckily, there is the standard <details> HTML tag that can achieve the same functionality. The issue I am encountering is that I cannot easily apply Accordion styling to the <details> tag.

This code snippet shows my current attempt where the accordion-header class wraps around the entire body content:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289978995">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="accordion">
    <details class="accordion-item">
        <summary class="">
            <div class="accordion-header">
                Title
            </div>
        </summary>

        <div class="accordion-body">
            <p>This is the body</p>
        </div>
    </details>
</div>

An alternative approach could be to style the summary element to resemble an .alert.

htmlcsstwitter-bootstrapbootstrap-5html-tag-details

Answer №1

The header wrapping the body is not very clear, but adding the "accordion-button" class to the title element can bring you closer to the desired result. However, please note that the icon won't automatically flip without the use of JavaScript or a custom CSS solution.

When working with Bootstrap 5.2+ and utilizing the Accordion CSS variables, you can apply the following CSS to change the arrow's appearance as the user opens or closes it:

details.accordion-item:not([open]) .accordion-button {
    background-color: var(--bs-accordion-bg);
}

details.accordion-item:not([open]) .accordion-button::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: unset;
}

details.accordion-item[open] .accordion-button::after {
    background-image: var(--bs-accordion-btn-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced3ced0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="accordion m-4">
  <details class="accordion-item">
    <summary class="accordion-button">
      <div class="accordion-header">
        Title
      </div>
    </summary>

    <div class="accordion-body">
      <p>This is the body</p>
    </div>
  </details>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize buttons to sort through and refine card displays in Bootstrap 4

On my landing page, I have 40 cards belonging to different categories or groups. There are a total of 5 categories. I am looking to add 5 buttons that, when clicked, will display only the cards from specific category or categories. I do not want to use a s ...

javascripthtmlbootstrap-4

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

Using Javascript to populate textboxes with the value of checkboxes

Within my web application, there is a series of checkboxes that, when selected, populate a textbox located above them. If more than one checkbox is checked, their values are displayed in the textbox separated by commas. These checkboxes are structured as ...

javascriptjqueryhtml

"Creating the Perfect Parallax Effect: A Step-by-Step

Seeking to implement a responsive parallax effect on my website, I have the following structure: <section id="first"> <div class="text fixed" > <h1><b>aSs</b> lorem ipsum dolor sit amet</h1> <p> ...

javascriptjquerycsshtmlparallax

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

htmlcssbootstrap-4containersgrid-layout

What is the best way to add an element directly following another within the document's head section?

In my HTML project, I am using JavaScript to insert style elements into the head section. I have implemented a function that should inject styles into a specific id within the head tags. This is a snippet of my current HTML code: function insertAtElemen ...

javascripthtml

Implement a click event for the newly added item

I am struggling to attach a click event to an element that I dynamically added using jQuery. When the item is present in my HTML code, everything works as expected. Please refer to the code below for clarification: HTML <div id="addNew">Add new Ite ...

javascriptjqueryhtmlclickappend

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

Adding text on top of an image

I am having trouble with the master slider plugin as slide1, 2, and 3 each have unique classes. I attempted to overlay text on the image but it is not showing up. I tried using the following CSS code but nothing appeared on the screen. .classnameslide1: ...

htmlwordpresscss

Use JavaScript to overlay a rectangle on top of an HTML element

Although I found a similar question here, it lacks any code in both the question and the answer. My goal is to convert this functionality into a 100% JavaScript solution. Currently, I can draw a rectangle on top of HTML content using PHP. I scrape a webs ...

javascripthtmlcanvas

Is it possible to attach the entered URL to an image following the text that has been inputted?

I've coded everything but the jquery part isn't working. Enter URL :<input type="text"> <button id="btn"> continue </button> <div contenteditable="true" id="bod"> Click here to start typing</div> $(document).ready( ...

javascriptjqueryhtmlcssangularjs

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Obtain the bootstrap CSS file

In all my various projects, I have been utilizing Bootstrap 3 and now I am interested in incorporating Bootstrap 4 cards into my work. However, I am struggling to locate the cards in a css format rather than the scss format. I personally don't think ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Is it feasible to distribute logic across Components?

My components all serve the same purpose: They display a form (with varying HTML) Capture the form data Validate and send the form using a REST API I am trying to find a way to share common elements among these components. For instance, each form includ ...

htmlangular

Click on the nearest Details element to reveal its content

Is there a way to create a button that can open the nearest details element (located above the button) without relying on an ID? I've experimented with different versions of the code below and scoured through various discussions, but I haven't be ...

javascripthtmljquery

What is the best way to limit an input field to only allow up to two decimal places and a maximum of 10 total

Is there a way to limit an input field to only accept two decimal places and have a maximum of 10 digits? I have implemented a function that is triggered by the onkeypress event and checks the length of the value entered into the input field. I have manag ...

javascriptjqueryhtmlrestrictions

Tips for clearing the browser cache when working with AngularJS in HTML code

Does anyone know how to clear the browser cache in HTML when using AngularJS? I've tried adding the following code to my index.html file and also used $templateCache in my app.js without success. <meta http-equiv="Cache-Control" content="no-cache, ...

htmlangularjsbrowser-cache

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

phphtmlmysqlcss