Implement accordion feature on a bootstrap connected list

I'm struggling to figure this out. My goal is to create a functionality where clicking on a Bootstrap linked-list item will expand it in an accordion style to reveal additional text.

Here's the code that I have so far: http://www.bootply.com/6zXrStZ2o3

<div class="container">
<h1>Bootstrap 3 List Groups</h1>
  <div class="list-group">
    <a href="#" class="list-group-item">
      Linked item in .list-group
    </a>
    <a href="#" class="list-group-item">Linked item in .list-group with Chevron and Badge
    </a>
  </div>
</div>

Does anyone know how I can implement a feature where clicking on the title of a linked list item expands it to display more content?

htmlcsstwitter-bootstrap

Answer №1

To easily control a collapsible element, simply include data-toggle="collapse" and a data-target attribute in the element.

<div class="container">
<h1>Bootstrap 3 List Groups</h1>
  <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info1">
      Linked item in .list-group
      <div id="info1" class="collapse">More Info #1</div>
    </a>    
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info2">Linked item in .list-group with Chevron and Badge
      <div id="info2" class="collapse">More Info #2</div>
    </a>    
  </div>  
</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

Troubleshooting problem with CSS formatting on Safari and Internet Explorer 8

Currently, I am utilizing a CSS stylesheet on one of my web pages. The styles are functioning flawlessly on Mozilla and IE 7 and older versions. However, there seems to be an issue with IE8 and Safari. The class width in the CSS is set at 700px. But when ...

cssasp.netcross-browserwidth

What is causing these images to appear larger than their original sizes?

My issue involves extracting multiple images from Facebook and displaying them in a scroller. When clicked, a dialog box appears with the full-size image (the images initially displayed are thumbnails obtained from a Facebook query using `src_small`). The ...

javascriptjquerycssimage

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

javascriptphpjqueryhtmlmysql

a label placed in a random location on the webpage

I am experiencing an issue on our website that uses a WordPress theme called Flat. Whenever we add a new page, there is an 'a' tag that appears to surround the entire page. This tag is not visible in the editor, leading me to believe it is being ...

phphtmlwordpress

Is it possible for me to add a div that consistently hovers above other divs on the page

Beginner in the world of CSS. Currently, I am developing a Safari extension where clicking its toolbar button will display a 'dialog banner' (comprising text and a few buttons) on the web page. This banner, in the form of a div, is dynamically a ...

csssafari-extension

How do I get the JavaScript If Style Color to function correctly?

Having some trouble with a basic if condition that checks the color of an element... function adjustColorScheme(element) { if (element.target.style.color == "#1abc9c"){ // Leave as is } else { // Do some ...

javascripthtmlcss

What is the best way to incorporate white space in Bootstrap until a specific element is at the top of the screen?

I want to enhance my website design in Bootstrap 4 by having an image appear at the top of the user's screen when a certain button or image is clicked. This can be achieved by adding white space to the bottom of the website so that the image remains v ...

javascripthtmlcssbootstrap-4

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...

javascripthtmlasp.netcssinternet-explorer

Nested divs with CSS padding inside

I'm curious about the excessive padding above and below the text in this fiddler box. http://jsfiddle.net/fZ6d7/1/ CODE <style> .simplebox { padding: 6px; background: #eee; border-radius: 8px; border: 1px ...

htmlcss

What is the method for creating the <p id="r1_c1"> element using Ruby interpolation?

I am looking for a way to generate an HTML id using some .erb code. Specifically, I need to use the row and column index of a cell in a rectangular array that is created from a table of cells. I have a method called cell.web_id, which produces a string lik ...

htmlruby-on-railssasserb

Change the background color of a checkbox with jQuery by toggling it

I'm currently utilizing the Bootstrap Tree to generate a nested checkbox list (). However, I am looking to enhance the user experience by highlighting the checked items, and ensuring that when a parent is selected, its children are also highlighted. W ...

javascriptjqueryhtmlcsstwitter-bootstrap

Swapping out a <DIV> element following a specified duration

Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...

jqueryhtmlreplace

On mobile devices, table rows do not stretch across the full 100% width

I'm facing an issue with a table I'm using for a shopping basket on my website. Everything seems to be working fine until I added a tfoot element, causing the tbody to not span 100% of the container's width. I've been troubleshooting a ...

htmlcsshtml-tableresponsive

Choose all elements that do not have ancestors with a specific class

Currently, I am brainstorming a selector that can target every textarea element, with the exception of those within the .noSpell class. Essentially, my goal is to have it identify: <div> <textarea /> </div> while excluding this scen ...

javascriptjquerycssjquery-selectors

Restrict the use of Shiny's unbindAll and bindAll functions to a specific HTML element

According to the Shiny site, it is recommended that before making changes to the DOM, such as adding or removing inputs and outputs, you should inform Shiny by using unbindAll and bindAll: function modifyDom() { Shiny.unbindAll() insertI ...

javascriptjqueryhtmlrshiny

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

Creating a website without access to the internet

When I'm working on my laptop in locations without internet access, I need to build a website. How can I assess the progress of my pages without an active browser? ...

htmlbrowser

CSS animation is supported on most browsers with the exception of Safari

I'm facing an issue with my animation that works fine on all browsers except Safari. I've tried using the autoprefix extension in VSCode to automatically add CSS vendor prefixes, but the animation still isn't functioning correctly. Here&apo ...

htmlcsssafari

Unusual occurrences observed with the table

While working with tables, I've noticed an unusual effect. Take a look at the two fiddles below. http://jsfiddle.net/v5co5uy7/ (why are the cells in the left column pushed down?) http://jsfiddle.net/v5co5uy7/1/ (the cells in the left column are posi ...

htmlhtml-table

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...

javascriptioshtmlwebhtml5-audio