Accordion panels that are both responsive and styled with Bootstrap to collapse horizontally

I've been searching for hours and can't find a solution to my specific issue. I'm feeling very frustrated and lost. The horizontal accordion I created with Bootstrap is not responsive within its container or the viewport. My CSS is messy from trying everything, so I apologize. Any help would be greatly appreciated.

My goal is to create something like this, which is responsive: https://i.sstatic.net/t30XY.png

However, my accordion is behaving differently: This is at 1288px https://i.sstatic.net/tQhE5.png

At around 1080px, you can see that the accordion doesn't respond at all, maintaining its dimensions and ignoring the wrapping divs. https://i.sstatic.net/VI1Xa.png

Once I switch to mobile view, it's fine because it becomes vertical. https://i.sstatic.net/UNijS.png

Here is the code:

<div class="row">
<div class="col-md-12">
    <div class="accordion-wrapper">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Featured Story
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <h4>Slide Title</h4>
                </div>
            </div>
        </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">About The Reins Act
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <h4>Slide Title</h4>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Video
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <h4>Slide Title</h4>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingFour">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseFour">Photos
                </a>
            </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
            <div class="panel-body">
                <h4>Slide Title</h4>
            </div>
        </div>
    </div>
    </div>
</div>


.accordion-wrapper {
display: block;
height: 350px;
max-height: 100%;
width: 750px;
}

#accordion {
max-width: 36.125rem;
margin-left: 15px;
}

.panel-group {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-98%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-98%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-98%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-98%) rotate(-90deg);
transform-origin: right top;
margin-bottom: 15px;
}

.panel-body {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
height: 86.2rem;
width: 20.125em;
}
htmlcsstwitter-bootstrap

Answer №1

Added some responsive CSS for smaller devices.

@media ( max-width : 767px){
             .accordion-wrapper {
                 display: block;
                 height: auto;
                 max-height: 100%;
             }
             #accordion {
                 margin-left: 0;
                 padding: 15px;
             }
             .panel-group {
                 -webkit-backface-visibility: hidden;
                 -webkit-transform: none;
                 -webkit-transform-origin: right top;
                 -moz-transform: none;
                 -moz-transform-origin: right top;
                 -o-transform: none;
                 -o-transform-origin: right top;
                 transform: none;
                 transform-origin: right top;
                 margin-bottom: 15px;
             }
             .panel-body {
                 -webkit-backface-visibility: hidden;
                 -webkit-transform: none;
                 -webkit-transform-origin: left top;
                 -moz-transform: none;
                 -moz-transform-origin: left top;
                 -o-transform: translateX(0%) rotate(90deg);
                 -o-transform-origin: left top;
                 transform: none;
                 transform-origin: left top;
                 height: auto;
                 width: auto;
             } 
         }

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

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

javascriptjquerycss

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

phphtmlmysql

The issue arises when trying to use jQuery on multiple elements with the same class

Recently, I came across a jQuery script for my mobile menu that changes the class on click event. jQuery("#slide-out-open").click(function() { if( jQuery( this ).hasClass( "slide-out-open" ) ) { jQuery('#wrapper').css({overflow:"hidd ...

javascriptphpjqueryhtmljquery-mobile

Creating a grid with individual node delays in CSS animations using ReactJS

Struggling with a CSS animation issue in ReactJs. I suspect the problem, but unsure how to solve it. I'm rendering a 5x5 grid and displaying it using this function: DisplayNodes = () => { const {grid} = this.state; // get the node array fro ...

javascriptcssreactjs

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

Creating a secondary ordered list with ongoing points - a step-by-step guide

Is there a way to create an unordered list with a continued ordered second level that automatically counts the points? I know about using <ol start="Previous number+1">, but is it possible for the list to continue numbering on its own? The ...

htmlhtml-lists

Creating a border around a div element using JavaScript

Is there a way to set a border for a div box using JavaScript similar to using border:2px solid #000; in CSS? Can this be done within the following for loop? elements = document.getElementsByClassName("box"); for (var i = 0; i < elements.length; i++) ...

javascripthtmlcss

Adapt your content to match the current slide of the dynamic Bootstrap Carousel

I recently implemented the basic carousel from the bootstrap website into my web application and encountered a challenge. I want to adjust the content on my site based on the active slide of the carousel... is this achievable? My goal is to display div On ...

javascriptjqueryhtmlbootstrap-4carousel

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

cssinheritance

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

pythonhtmlselenium-webdriverweb-scrapingpopup

Creating a personalized CSS class for TYPO3 menu links

I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package. My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my ...

csstypo3typoscriptfluidextbase

inline field Django Bootstrap Modal template

I currently have two classes defined in my models.py file: "Post" and "Slide". Here is a snippet of the "Slide" class: class Slide(models.model): post = models.ForeignKey(Post, related_name="slides") name = models.TextField() In my admin.py file, I have ...

pythondjangotwitter-bootstrap

Verification of Email Address Using HTML5

There are claims that with HTML5, there is no longer a need for JavaScript or server-side code to validate user input as a valid email or URL address. I am wondering how I can validate an email after a user enters it and without using JS, how can I displa ...

htmlemail

The best way to horizontally arrange card-images side by side in react native

Recently delving into the world of react native, I encountered an issue with aligning card images side by side using react-native-elements. My goal is to have two rows on phones and three rows on tablets. However, despite setting the flex-direction to row ...

javascriptcssiosreactjsreact-native

Would it be practical to use a 1kb .png image on repeat as a background image?

I recently created a PNG image from the website . This image is only 1kb in size and I am currently using it as the background-image on the body tag of my webpage. Now, I am contemplating using another image that is significantly larger at 500kb (with dim ...

csspngweb-optimization

Performing a subtraction operation using HTML5 and JavaScript

While I wish I could write about something more exciting than value subtraction, unfortunately that's not the case. In a game scenario where asteroids are approaching the player, who has the ability to move around, the intention is for the player&apos ...

javascripthtml

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

c#htmlimagebootstrap-4razor-pages

Ways to verify if a particular value is included in a list

I am faced with a situation where I need to display different content in HTML based on the presence of a specific value ("sign_change_global") in a JSON loaded from a server. I believe this issue can be resolved within HTML only, but I also wonder if there ...

htmljsonangularjs

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

htmlcss