Display the Bootstrap accordion by default on desktop screens and hide it by default on mobile devices

I'm relatively new to Bootstrap and could use some guidance on a particular issue.

Currently, I have a basic Bootstrap accordion setup with multiple sections that can expand and collapse independently of each other. However, I'd like to disable this functionality on desktop and have all items expanded by default. On mobile, I only want the first item to be shown while the others remain collapsed.

If anyone has advice on how to achieve this, I would greatly appreciate it!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07

...

javascripthtmlcssbootstrap-4

Answer №1

I have come up with a solution to the problem, please see below

Styling for desktop view

.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%; 
 height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}

Styling for Mobile view 

@media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}

HTML structure 

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">Content-1</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
      <div class="card-body">Content-2</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">Content-3</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

Revamp your website with an AJAX-powered login form that dynamically updates the page content upon successful

Imagine having a page with a dynamic login/logout feature in the header that operates smoothly via AJAX. When a user is not logged in, display a message saying "Hey, login" and provide the option to login via AJAX, which functions correctly. However, onc ...

phpjavascriptjqueryajax

Illuminating Wireframes with Three.js MeshPhongMaterial

While attempting to display a mesh with Phong shading along with wireframe on an ArrayBufferGeometry where the vertex colors are set to THREE.vertexColors, I encountered an issue where the lighting only affects one random face. However, when I switch to Me ...

javascriptthree.js

"Customizing a footer to resemble a bootstrap nav-bar: A step-by-step guide

My situation involves the need to have a footer that functions similarly to a navbar. I want to be able to hide the list items of a ul list by clicking on a custom button, similar to the functionality of the bootstrap hamburger menu. Is it possible to use ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-transitions

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

I'm currently working on prototyping a microfrontend architecture using Rollup and multiple create-react-app applications. However, when I try to locally yarn link my external app with the container app, I am encountering the following error: The err ...

javascriptreactjsreact-routerrollupjs

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

javascriptjqueryhtmlcss

Ways to emphasize the chosen row within angular js 4

Today, I am exploring an example to understand how data can be passed from a parent component to a child component and back. Below are the files that I have used for this example. I have included both the HTML and TypeScript files for both the parent and ...

javascriptangularangular-components

Find the parent element using its XPath

Here is the code snippet I'm working with: <div class="different"> <input id="distinctId" type="checkbox"> <label for="distinctId">a unique label</label> </div> I know how to select the input element using its i ...

htmldomxpath

Error message: "Issue with Jointjs library on Node.js server - Uncaught ReferenceError: Joint is not recognized"

I am attempting to create a sample diagram using the code below on a file hosted on a Node server: <!DOCTYPE html> <html> <head> <title>newpageshere</title> <link rel="stylesheet" href="joint.css" /> <script src="j ...

javascriptnode.jsjointjs

Troubleshooting Problems with Owl Carousel Loading

Having trouble with Owl Carousel loading issue. I've set up my carousel using the Owl Carousel jQuery plugin as guided, but it's showing me an "owl-carousel loading" class added to the DOM (owl-loading). I've tried adding custom styles and J ...

javascriptjqueryhtmlowl-carousel-2

Creating an interactive map using Python with Folium, incorporating a draggable legend and clickable items for users to easily zoom into specific locations

Looking to create an interactive map with python folium package. Need icons for locations and a draggable legend that allows for repositioning by mouse drag. Also need ability to click on legend items to zoom into corresponding locations on the map. Can s ...

htmlpython-3.xfoliumfolium-plugins

Struggling with implementing a personalized zoom feature in React-Leaflet?

Looking to create a custom Zoom button using react-leaflet Below is the code I have been working on: import React from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import { Map, TileLayer } from 're ...

javascriptreactjsleafletreact-leaflet

How can JavaScript be used to dynamically load a second advertisement image immediately after the first ad image is successfully loaded?

Currently, I am working on ensuring that the 2nd ad image loads ONLY AFTER the 1st ad image has been loaded (please refer to the image with blue boxes). This is crucial as I have a CSS animation transitioning smoothly from the 1st ad image to the 2nd ad im ...

javascriptasynchronouscookiespromise

How to troubleshoot Props not functioning in nextjs-typescript?

I'm having trouble with props in my project and I can't seem to figure it out! Here are the three files. I'm still learning typescript but everything seems fine in the code, yet it's not working! Here is index.tsx file: const Home: ...

javascriptreactjstypescriptnext.js

Adjust the contents of a div to automatically fit within a hidden overflow div

Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is: .jumbotron { overfl ...

jqueryhtmlcssbootstrap-4

Having difficulty assigning a JSON key value to a variable

I am encountering an issue where I keep receiving '[object HTMLParagraphElement]' instead of the ID value that I expected. The desired output should resemble this: I attempted to store the console.log output in a variable, but my attempts were ...

javascriptjqueryjson

Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...

cssreactjssass

Convert the input string into an array of individual words, excluding any contractions that contain

Trying to create a searchbar that matches element datatags with user input, I've realized I need to convert the Input value into an array. The conversion is fine, but I also need to eliminate abbreviated words in the array. In order to do this, I rem ...

javascriptjqueryarraysreplacesplit

What is the best way to create a row with three responsive columns that include images, text, and links using Bootstrap 4?

I need help setting up three responsive columns in a row using Bootstrap 4. .buttons { border: 1px solid #e86225; color: #e86225 !important; padding: 10px 20px; font-size: 14px; } .buttons:hover { border: 1px solid #ffffff; back ...

cssimagebootstrap-4centering

Tips for placing the footer at the bottom of the page and ensuring it is pushed below the content as the amount of content increases

I am struggling to position the footer on my webpage at the bottom of the screen when there is limited content. If the content height exceeds the screen height, I want the footer to flow below the content instead of staying fixed at the bottom. Despite tr ...

htmlcsscss-positionsticky-footer

Tips for creating a string format for the value of an HTML attribute

I have set up a datalist with labels in the format: "City name (city code)" <!-- COG municipalities selector --> <input type="text" list="cogMunicipalities" [(ngModel)]="municipality" (click)="selectMunicipalityCode(municipality)"> <datalis ...

htmlangulartypescript