Boot up 4 collapse feature to conveniently close all other collapsible items at once

Utilizing the Bootstrap 4 Collapse component.

My goal is to toggle between collapsible sections like "Categories" and "Brands", displaying only one at a time. The current issue is that multiple collapsible elements are visible simultaneously.

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
[code snippet]

I've tried using the data-parent attribute on the .collapse elements within a wrapper element, but encountered an error stating "Uncaught TypeError: Cannot read property 'querySelectorAll' of null."

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
[code snippet]

Any suggestions on how I can ensure that only one collapsible element is displayed at any given time?

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Just a small step away from the solution.

The mistake you made was adding a # in the id of viewCustomFilters, so it should have been 

<div id="#viewCustomFilters" class="view-custom-filters">
instead of 
<div id="viewCustomFilters" class="view-custom-filters">

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
<div id="viewCustomFilters" class="view-custom-filters">
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#categories-collapsed" aria-expanded="true" aria-controls="categories-collapsed">
      Categories
    </div>
    <div class="view-collapse-content collapse" id="categories-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
        <li>
          <a href="#">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#brands-collapsed" aria-expanded="true" aria-controls="brands-collapsed">
      Brands
    </div>
    <div class="view-collapse-content collapse" id="brands-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 5</a>
        </li>
        <li>
          <a href="#">Link 6</a>
        </li>
        <li>
          <a href="#">Link 7</a>
        </li>
        <li>
          <a href="#">Link 8</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d495348534e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4849b84849186da9e87b4c5dac5c2dac5">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7e647f6479">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

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

Issue TS1112: It is not possible to declare a class member as optional

I'm currently working on creating a movie catalog using Angular and Ionic. Within the Movie class, I have properties for id, title, image, and plot. On the initial page of the app, only the id, title, and image are displayed, while the plot is omitte ...

javascriptangularjsclasstypescript

connecting a JavaScript object literal to a specific address within an HTML document

I'm encountering an issue with creating an object that contains properties such as {"name":"John Doe","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08e818d85a0848f8d81889c8b848d8a">[email protected]</ ...

javascripthtml

Verify the definition of the checkbox

I'm attempting to determine whether a checkbox is defined and unchecked. When the page loads, my checkbox is disabled and I receive an error indicating that it is undefined. I attempted to create a condition to prevent the error but was unsuccessful. ...

javascriptangularjs

Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well. I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue: When I input a long passag ...

htmlcssreactjsreact-nativenext.js

Transferring an HTML variable to a PHP document

My HTML file includes the following: <div class="panel-body panel-refine"> <span id="price-left" class="price-left pull-left" data-currency="&euro;">500</span> <span id="price-right" class="price-right pull-right" data-currency="& ...

phphtml

Having trouble resolving 'primeng/components/utils/ObjectUtils'?

I recently upgraded my project from Angular 4 to Angular 6 and everything was running smoothly on localhost. However, during the AOT-build process, I encountered the following error: ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory. ...

htmlangulartypescriptmigrationangular-aot

What is the best way to organize the table by date when not all dates are filled in?

**Issue with React-Table Sorting:** I'm encountering an issue with my React-Table implementation. I am using version 7 of the plugin. { Header: 'DATE', accessor: 'DATE', sortType: (rowA, rowB) => { ...

javascriptreactjsdatereact-table

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

htmlcsssafari

Changing the color of a div's text based on its content with CSS

I am facing a challenge in styling the text inside a “div” element using a Javascript function. Initially, when the page loads, these “divs” contain no value. The values of the "divs" will change between "Open" and "Closed" twice a day when the Jav ...

javascripthtmlcss

Guiding user to their destination after signing in

Having trouble showing different headers based on user login status? Users can log in using login.php, but you're struggling to display header.php when a user is not logged in or logged in. You want the page to show profile form content when they are ...

phphtmlmysqldatabasesession

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

javascriptjquerycssajaxphotoswipe

The React.js Mui Collapse component exclusively triggers animation during the transition while closing, without any animation when expanding

Whenever I implement the Collapse component from Mui library in my projects, I face an issue where the transition animation only works when closing the component (when in={false}). However, when opening the component, there is a delay before the animation ...

javascriptreactjsmaterial-ui

Transforming JSON data into a visually appealing pie chart using highcharts

I'm having trouble loading my JSON string output into a highcharts pie chart category. The chart is not displaying properly. Here is the JSON string I am working with: var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\ ...

javascriptjavajsonchartshighcharts

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-to ...

javascripthtmlcsstwitter-bootstrapdropdown

Storing data from an API response into the localStorage using Vue.js upon clicking

My objective is to save specific data in the browser's localStorage upon clicking a link. However, the output I receive is either undefined or completely empty. <li v-for="(category, index) in categories" :key="index"> ...

javascriptvue.jsvuejs2

Is it advisable to incorporate multiple images onto a single canvas?

What is the best approach to handling multiple images in HTML5? Is it preferable to create a separate canvas tag for each image or is it equally effective to have multiple images in one canvas, and how would I go about doing that? Here is the code I have ...

htmlimagehtml5-canvas

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Using VS Code Intellisense can greatly enhance productivity when working with internal project files, providing helpful autocompletion features and utilizing written JSDoc comments. However, my current projects involve custom JavaScript libraries stored i ...

javascripttypescriptvisual-studio-codees6-modules

NativeScript has just faced a critical issue: an Uncaught ReferenceError has occurred stating that the variable __UI_USE_EXTERNAL_RENDERER__ is not

While working on iOS on my Mac, I encountered an unexpected error. ***** Fatal JavaScript exception - application has been terminated. ***** NativeScript encountered a fatal error: Uncaught ReferenceError: __UI_USE_EXTERNAL_RENDERER__ is not defined at (f ...

javascriptiosmobilenativescriptnativescript-vue

Aligning text in the center of a header, positioned beside an image

I am facing an issue with centering text within a banner. The banner is divided into 12 columns, with a cross icon placed in the left-most column for closing the window. However, the text is not centering within the whole banner width but only within the s ...

htmlcssbootstrap-modal

What is the method for adding line breaks to a JSON file?

I've been developing a Discord bot and I'm currently storing currency values in a json file. The functionality is working smoothly, but the issue I'm facing is that it's adding them to the json file in a single line which makes it diffi ...

javascriptjson