Tips for synchronizing accordion content changes on both the left and right side simultaneously

i have already written the code and here is the result: https://i.sstatic.net/sEsjQ.png

when i click on another accordion, i want the image on the right side to change like this: https://i.sstatic.net/PCNXY.png

i tried to implement it myself, but instead of changing in place, the images are stacking up like this: https://i.sstatic.net/FLAtt.png

i used the following code and would appreciate any help in solving this issue

    <section class="various__sect">

        <div class="container">
            <div class="row">
                <div class="col-6 various__left__group">
                    <div class="various__title">
                        Various Kinds of Finances Products
                    </div>
                    <div class="various__accordion">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                <button id="collapseOne" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                    1. We have features that help your finances
                                </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        With this scan features, it can make transactions faster and safer, of course
                                        <div class="mt-3">
                                            <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                <button id="collapseTwo" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                    2. All kinds of activities regarding finances
                                </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                    With this scan features, it can make transactions faster and safer, of course
                                    <div class="mt-3">
                                        <a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                <button id="collapseThree" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                    3. Various of needs regarding finance here
                                </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#...

This layout was created using Bootstrap 5

Answer №1

With the power of Bootstrap 5, I successfully crafted a unique section featuring an innovative combination of both Tab View and Accordion elements. The magic happened when I ingeniously merged the "tab" and "accordion" attributes and classes within the HTML tags.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">

        <!-- BootStrap 5 CDN -->
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e6f9e4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb1aeb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    </head>
    <body>
    

        <div class="accordion-tab-section">
            <div class="container">
                <div class="row pt-5">
                    <div class="col-lg-7">
                        <div  id="accordionExample" class="d-block accordion nav nav-tabs" role="tablist">
                            <div class="accordion-item" data-bs-toggle="tab" data-bs-target="#accordion-one" type="button" role="tab" aria-controls="accordion-one" aria-selected="true">
                              <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                  Accordion Item #1
                                </button>
                              </h2>
                              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item" data-bs-toggle="tab" data-bs-target="#accordion-two" type="button" role="tab" aria-controls="accordion-two" aria-selected="false">
                              <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  Accordion Item #2
                                </button>
                              </h2>
                              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item" data-bs-toggle="tab" data-bs-target="#accordion-three" type="button" role="tab" aria-controls="accordion-three" aria-selected="false">
                                <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                  Accordion Item #3
                                </button>
                              </h2>
                              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </div>
                              </div>
                            </div>
                          </div>
                    </div>
                    <div class="col-lg-5">
                        
                        <div class="tab-content d-flex justify-content-center align-items-center h-100" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="accordion-one" role="tabpanel" aria-labelledby="accordion-one-tab"><h2>Accordion Item 1</h2></div>
                            <div class="tab-pane fade" id="accordion-two" role="tabpanel" aria-labelledby="accordion-two-tab"><h2>Accordion Item 2</h2></div>
                            <div class="tab-pane fade" id="accordion-three" role="tabpanel" aria-labelledby="accordion-three-tab"><h2>Accordion Item 3</h2></div>
                        </div>
                    </div>              
                </div>
            </div>
           
        </div>

    </body>
</html>

Answer №2

To display a specific div, remember to remove the 'show' class from all other right hand divs.

$('div.collapse.multi-collapse').removeClass('show');

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

The Bootstrap collapsible feature is causing elements to shift to the adjacent column

I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details. However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the ne ...

Issues with XML webservice in VB ASP.NET are causing functionality discrepancies

I have a web method set up in my asmx file as follows: <WebMethod(EnableSession:=True)> _ Public Function Greetings(ByVal name As String) As String Return "Hello, "+ name End Function Everything functions smoothly when I use ajax ...

Display a div using Jquery when the bottom button is clicked

<div id="Slider-First Slider-Common"> <div class="Slider-Item Slider-First"> <img src="img/dog1.jpg"/> </div> <div class="Slider-Item Slider-Second"> <img src="img/cat1.jpg"/> </div> ...

Three fluid columns in a CSS flexible container

I need help with creating a fluid div container: width: 97%; min-height: 80px; -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); background: white; margin ...

"Troubleshooting: Why does a DT Datatable with selectInputs keep reverting back to

I recently incorporated selectize capability into the selectInputs within a column of a DT datatable in my Shiny app. Following some guidance provided here, I implemented JavaScript to enhance the style and search functionality of selectize. However, due t ...

Execute a .exe file on the client's end. Thank you

Is there a way to run an exe file on a client's machine? ...

Using 'jquery.get' in combination with a servlet is

I need a servlet that can handle GET requests and return a specific string. A simple example of the code is shown below: public class QueryHandler extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) ...

Retrieving response body in success and error using AJAX

Forgive me for asking a somewhat silly question, but I really need your assistance. I am trying to gather information on how to handle responses within an AJAX call. $.ajax({ type: "POST", url: '/register', data : r ...

Modifying background image with Javascript

I've been working on developing a slideshow for one of the web pages I'm building. To achieve this, I set up a div with a unique class name that allows me to change the background image using JavaScript. Here's what I've accomplished so ...

How to toggle Bootstrap 5 dropdowns with both click and hover functionality

I am currently working on a dropdown menu using HTML/CSS/JavaScript/jQuery and Bootstrap 5. The objective is to have the menu open/close both when hovered over and clicked on: When the mouse hovers over the dropdown element, the menu should open Once the ...

Ways to secure a floating item onto a backdrop picture

Currently I am working on editing this page. When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image ...

Incorporating HTML 5 data attributes into the DOM using jQuery

I'm attempting to insert an HTML 5 data attribute into the DOM. According to the jQuery site, the format for data attributes is as follows: $('.pane-field-related-pages ul').data("role") === "listview"; However, it doesn't appear to b ...

Error encountered while attempting to upload a file using ajax

I'm having trouble uploading an image to my backend. Along with the image, I need to send three things - a file (a URL) and a title. However, every time I try to do this, I receive a "400 Bad Request" error. In the network tab, I can see a response si ...

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

Troubleshooting ASP.NET MVC 4 Clientside Validation Failure

I am encountering an issue with implementing custom attribute client-side logic in Visual Studio 2012. Despite my efforts, the validation does not seem to work as intended. To troubleshoot this problem on a smaller scale, I decided to create a new MVC 4 pr ...

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

Hey everyone, It's been a long time since I started listening, but this is my first post... I have a client who needs a complex feature on their website. They want to merge the content of 3 different pages into one seamless experience for users afte ...

Creating interactive dropdown menus with PHP and Catalyst using Jquery

Currently, I am working on incorporating cascading dropdown menus into a catalyst web app. The main goal is to allow users to select a database table from the first dropdown menu and have the columns of that table populate the second dropdown menu. To achi ...

Utilize the Sed command to manipulate the input stream by substituting all occurrences of HTML <i> tags with <em> tags

I am attempting to create a regex with the sed command in order to process the input stream and replace all HTML tags with em tags. For example: This is <i id="x">emphasized text</i> and <i>so is this</i>. should be replaced by Thi ...

Is there a way to transfer an element from one row to another using Bootstrap?

Can the grid layout transition smoothly from a desktop view to a mobile view using Bootstrap 4 or pure CSS flex classes? Desktop view: Mobile view : Currently, I have a solution in place but I want to avoid repeating content in two different places. Is ...

Tips for combining text and an unordered list on the same line:

I attempted to align them in a single line, but they are not cooperating. The text floating to the left looks fine, however, the list that floats to the right is causing issues. I tried various methods to make them display inline, but they still appear sli ...