Accordion-style menu buttons

I'm in the process of developing an accordion button feature. I have a collection of buttons on the side menu that trigger information display on the side. The goal is to create an accordion effect where only one row of information is visible at a time.

Can anyone provide guidance on how to achieve this?

<div class="col-sm-2 row side">
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f1" data-parent="#accordion">Farm Fresh Produce</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f2" data-parent="#accordion">Building 1</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f3" data-parent="#accordion">Building 2</button>
</div>

<section class="col-sm-9 col-sm-offset-1">
    <div class="row collapse" id="f1">
        <p>Stuff 1</p>
    </div>
    <div class="row collapse " id="f2">
        <p>Stuff 2</p>
    </div>
    <div class="row collapse " id="f3">
        <p>Stuff 3</p>
    </div>
</section>
htmlcsstwitter-bootstrapbuttonaccordion

Answer №1

Take a look at this:

VIEW DEMO

<div class="col-sm-2 row side">
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f1" data-parent="#accordion">Farm Fresh Produce</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f2" data-parent="#accordion">Building 1</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f3" data-parent="#accordion">Building 2</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f4" data-parent="#accordion">Building 3</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f5" data-parent="#accordion">Building 4</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f6" data-parent="#accordion">North Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f7" data-parent="#accordion">South Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f8" data-parent="#accordion">Center Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f9" data-parent="#accordion">Open Air Market</button>
</div>

<section class="col-sm-9 col-sm-offset-1">
    <div class="panel-group" id="accordion">
        <div class="panel">
            <div class="row panel-collapse collapse" id="f1">
                <p>Contents 1</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f2">
                <p>Contents 2</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f3">
                <p>Contents 3</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f4">
                <p>Contents 4</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f5">
                <p>Contents 5</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f6">
                <p>Contents 6</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f7">
                <p>Contents 7</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f8">
                <p>Contents 8</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse" id="f9">
                <p>Contents 9</p>
            </div>
        </div>
    </div>
</section>

Answer №2

For detailed information, please refer to the Bootstrap documentation

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f1">Farm Fresh Produce</a>
      </h4>
    </div>
    <div id="f1" class="panel-collapse collapse">
      <div class="panel-body">
            Content for Farm Fresh Produce
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f2">Building 1</a>
      </h4>
    </div>
    <div id="f2" class="panel-collapse collapse">
      <div class="panel-body">
            Content for Building 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f3">Building 2</a>
      </h4>
    </div>
    <div id="f3" class="panel-collapse collapse">
      <div class="panel-body">
            Content for Building 2
      </div>
    </div>
  </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

What methods can I use to locate the datetime format within an HTML document using JavaScript?

I am working on a page where I need to locate and convert all datetime values. Specifically, I am looking to identify Hijri datetime values and convert them to standard datetimes using JavaScript. Could someone please advise me on how to locate datetime ...

javascriptasp.nethtml

What's the issue with my jQuery AJAX script?

I am experiencing an issue with my ajax pages using jQuery to retrieve content. Only one page seems to be working properly, even though I have multiple pages set up. How can I resolve this problem? $(document).ready(function() { $('.lazy_content& ...

javascriptjqueryhtmlajax

Tips for applying CSS to background images

Just working with one div here <div id="particles-js" > and in my CSS, I've got this: #particles-js{ width: 100%; height: 100%; background-color: #b61924; background-image: url("../js/image.jpg"); background-size: cover; backg ...

htmlcss

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Looking for help to create a parallax effect on an image when hovered over. Does anyone have any advice or resources? Feeling frustrated at the moment. Here is an example link for reference: http://codecanyon.net/item/jquery-moving-perspective/full_scre ...

javascriptjquerycssimage

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

javascriptcssreactjsmaterial-uireact-with-styles

issue with custom $position-values not being recognized in Bootstrap 5

Having trouble positioning text on top of a bootstrap carousel using Bootstrap's position class. The default values (0,50,100) aren't giving me the appearance I want. I tried adding custom values to the $position-values in my scss file, but they ...

csssassfrontendreact-bootstrapbootstrap-5

Using JavaScript to we can transfer the function result to an HTML input field

Is there a way to display the result of a JavaScript function in an HTML input field? Here is an example form: https://i.sstatic.net/HHHl2.png When I click "Run - Script," the following simple script is executed: <button type="submit" class="btn btn ...

javascripthtmlbootstrap-4

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

Tips for creating responsive emails

Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...

htmlcssmedia-querieshtml-email

Place a single div above two divs in a flexbox container

I am struggling with aligning the fourth div, which has a class of "details", above the second and third div in a flex box layout. Despite my efforts, I have not been successful in achieving this alignment. Can someone please assist me? .flex-container ...

htmlcssflexbox

Unable to send form data to PHP script

Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> https://i.sstatic.net/BK3X9.png PHP and JQUERY CO ...

phphtmljquerycss

What is the best way to align text within both the grid row and column while still maintaining the border?

When I apply justify-self and align-self rules, it successfully centers items vertically and horizontally. However, the issue arises when the borders wrap around the text instead of expanding all the way to the edges. My goal is to have a 1px border aroun ...

htmlcsschartscss-grid

Instructions on relocating a rectangle and capturing its coordinates globally for cropping the chosen image

I am currently a software engineering trainee, focusing on learning Angular CLI. My current project involves image cropping on a canvas, where I draw a circle when clicked. My query pertains to moving the circle with a mousedown event and stopping it upon ...

csshtmlangulartypescripthtml5-canvas

What is the best way to implement CSS in a web application?

I've encountered an issue where the CSS styles are not applying when I add my web app to the home screen of an iPhone and launch the app using a shortcut icon. To illustrate, consider the following examples. First, opening the app with Safari. Below ...

ioscssiphonesafari

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

Unable to choose anything within a draggable modal window

Can someone please assist me? I am struggling to figure this out. I can't select text inside the modal or click on the input to type text into it. I suspect it may be due to z-index issues, but I'm having trouble locating them. var currentZ = n ...

javascripthtmlcssangularjs

Deactivating Webkit Input Form Shadow

Similar Question: Looking to Remove Border on Input Boxes in Chrome? Is it possible to turn off the colorful shadow effect produced by Webkit browsers when a form field is clicked? The yellow shadow in Chrome and blue shadow in Safari can interfere wi ...

htmlcssformswebkit

Using CSS to overlay a fixed element with a specific z-index

HTML: <div class="wrap"> <div class="fixed"></div> </div> <div class="cover"></div> CSS: .cover{z-index: 10;} .wrap{position: relative; z-index: 1;} .fixed{position: fixed; display: block; z-index: 1;} Example: ...

htmlcsscss-positionfixed

Having trouble with your CSS on your mobile website?

After developing a website and implementing media queries for responsiveness, everything seemed to be in perfect working order. The website displayed flawlessly on emulators like () and Chrome's inspect element, mirroring my desired mobile design. How ...

htmlcssmedia-queries

Refreshing Cache Upon Browser Back button press in PHP

Recently, I developed a user login system using PHP. One issue that I encountered is when a user logs in and then presses the back button, they are not automatically logged out. After some research, I discovered that clearing the cache when the back butt ...

phphtmlforms