I'm having trouble getting my accordion menu to work properly. Whenever I click on the question title, the answer doesn't seem to show up or collapse. What could be causing this issue?

I am currently working on a project to create an accordion menu where the answers are hidden and only revealed upon clicking the question. However, when I test it out, nothing happens when I click on the question.

Here is my code:

.accordion-Section {
  background: #fdfdfd;
  min-height: 100vh;
  padding: 10vh 0 0;
}
... (CSS code continues)


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<body>
... (HTML code continues) 

</body>

Expected Outcome: The Accordion menu should expand and collapse when the question is clicked.

Actual Outcome: Clicking on the question does not trigger any response or action.

javascripthtmlcss

Answer №1

Ensure that the data-target attribute follows the correct CSS selector format. Change 

data-target="accordionCollapse-1"
to 
data-target="#accordionCollapse-1"
because you are targeting a div element with an id.

For more information, refer to the official documentation.

.accordion-Section {
  background: #fdfdfd;
  min-height: 100vh;
  padding: 10vh 0 0;
}

.accordion-Title {
  position: relative;
  margin-bottom: 45px;
  display: block;
  font-weight: 600;
  line-height: 1;
}

.accordion-Title h2::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 60px;
  height: 2px;
  background: #E91E63;
  bottom: -25px;
  margin-left: -30px;
}

.accordion-Title p {
  padding: 0 190px;
  margin-bottom: 10px;
}

.faq {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.faq .accordion {
  border: none;
  background: none;
  border-bottom: 1px dashed #CEE1F8;
}

.faq .card .accordionCardHeader {
  padding: 0px;
  border: none;
  background: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.faq .card .accordionCardHeader:hover {
  background: rgba(233, 30, 99, 0.1);
  padding-left: 10px;
}

.faq .card .accordionCardHeader .accordion-Title {
  width: 100%;
  text-align: left;
  padding: 0px;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #3B566E;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
}

.faq .card .accordionCardHeader .accordion-Title .badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 14px;
  float: left;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  background: #E91E63;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.faq .card .card-body {
  padding: 30px;
  padding-left: 35px;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #6F8BA4;
  line-height: 28px;
  letter-spacing: 1px;
  border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .faq {
    margin-bottom: 30px;
  }
  .faq .card .accordionCardHeader .accordion-Title {
    line-height: 26px;
    margin-top: 10px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <section class="accordian-Section">
    <div class="container">
      <div class="row">

        <div class="col-md-6 offset-md-3">
          <div class="accordion-Title text-center pb-3">
            <h2> About </h2>
          </div>
        </div>
        <div class="col-md-6 offset-md-3">
          <div class="faq" id="accordion">
            <div class="card">
              <div class="accordionCardHeader" id="accordionHeading-1">
                <div class="mb-0">
                  <h5 class="accordion-Title" data-toggle="collapse" data-area-expanded="true" data-aria-controls="accordionCollapse-1">
                    <span class="badge">1</span> What is Lorem Ipsum? </h5>
                </div>
              </div>
              <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion">
                <div class="card-body">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                    book. </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>

Additionally, ensure that the data-target is correctly set to target the surrounding container instead of the h5 tag. Remove these attributes from your h5 tag:

  • data-target="#accordionCollapse-1"
  • data-area-expanded="true"
  • data-aria-controls="accordionCollapse-1"

I have also included CSS to give the clicked area a pointer cursor:

.accordionCardHeader {
  cursor: pointer;
}


.accordionCardHeader {
  cursor: pointer;
}

.accordion-Section {
  background: #fdfdfd;
  min-height: 100vh;
  padding: 10vh 0 0;
}

.accordion-Title {
  position: relative;
  margin-bottom: 45px;
  display: block;
  font-weight: 600;
  line-height: 1;
}

.accordion-Title h2::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 60px;
  height: 2px;
  background: #E91E63;
  bottom: -25px;
  margin-left: -30px;
}

.accordion-Title p {
  padding: 0 190px;
  margin-bottom: 10px;
}

.faq {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.faq .accordion {
  border: none;
  background: none;
  border-bottom: 1px dashed #CEE1F8;
}

.faq .card .accordionCardHeader {
  padding: 0px;
  border: none;
  background: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.faq .card .accordionCardHeader:hover {
  background: rgba(233, 30, 99, 0.1);
  padding-left: 10px;
}

.faq .card .accordionCardHeader .accordion-Title {
  width: 100%;
  text-align: left;
  padding: 0px;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #3B566E;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
}

.faq .card .accordionCardHeader .accordion-Title .badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 14px;
  float: left;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  background: #E91E63;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.faq .card .card-body {
  padding: 30px;
  padding-left: 35px;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #6F8BA4;
  line-height: 28px;
  letter-spacing: 1px;
  border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .faq {
    margin-bottom: 30px;
  }
  .faq .card .accordionCardHeader .accordion-Title {
    line-height: 26px;
    margin-top: 10px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<section class="accordian-Section">
  <div class="container">
    <div class="row">

      <div class="col-md-6 offset-md-3">
        <div class="accordion-Title text-center pb-3">
          <h2> About </h2>
        </div>
      </div>
      <div class="col-md-6 offset-md-3">
        <div class="faq" id="accordion">
          <div class="card">
            <div data-toggle="collapse" data-target="#accordionCollapse-1" data-area-expanded="true" data-aria-controls="accordionCollapse-1" class="accordionCardHeader" id="accordionHeading-1">
              <div class="mb-0">
                <h5 class="accordion-Title">
                  <span class="badge">1</span> What is Lorem Ipsum? </h5>
              </div>
            </div>
            <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion">
              <div class="card-body">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                  book. </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

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

Retrieving selective attributes from Cosmos DB NoSQL using NodeJS/Javascript: Exploring the readAll() method for retrieving specific attributes instead of the entire object

Imagine having the following set of documents in your Cosmos DB (NoSQL) container: [ { "id": "isaacnewton", "fullname": "Isaac Newton", "dob": "04011643", "country": &q ...

javascriptnode.jsazure-functionsazure-cosmosdbazure-cosmosdb-sqlapi

CSS declarations that have not been acknowledged or acknowledged

While working on a client's stylesheet today, I came across the following code: p { -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: manual; orphans: ...

htmlcss

Screening strings and arrays based on multiple criteria

My code is below and I am trying to have the bot check for two specific conditions in the user's message. The message must contain "how" plus either "doing" or "bread". It works perfectly when using only "doing" but not when adding the "bread" conditi ...

javascriptnpmdiscorddiscord.js

Displaying the contents of a local HTML file in a div

I am attempting to load a local HTML file into a div, however it is not displaying any content on the page despite showing an alert. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

javascriptjqueryhtml

Prevent unnecessary clicks with Vue.js

In my vue.js application, there is a feature to remove items. The following code snippet shows the div element: <div class="ride-delete" @click="delete"> <p>Delete</p> </div> This is the function used to handle the click ...

javascriptvue.js

AngularJS: Organizing Controllers Horizontally Within ngRepeat

My data consists of a table with 100 rows, each representing a complex object that is an instance of a specific type. User interactions trigger operations on these objects individually, with each row having unique operations independent of the others. $sc ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Distinguish between datalist selection and text input in BootstrapVue Autocomplete

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> &l ...

javascripthtmlvue.jsvuejs2bootstrap-vue

An error has occurred: Angular is unable to recognize the expression for ng-click and is throwing a syntax error

It's driving me crazy. The code is working fine, but I keep getting this error in the console. The line of code is part of an accordion menu created using Angular and UI-Router. <li ng-repeat="item in group.items"><a ng-click="setActiveView( ...

javascriptangularjsangular-ui-router

Enhancing Security with Subresource Integrity in Angular-Cli

Has anyone discovered a way to enable Subresource Integrity with Angular-CLI? I came across this GitHub Pull Request that suggests it may become a feature in the future: GitHub Pull Request. I tried to activate it on the current versions but had no luck. ...

javascriptangularangular-clicontent-security-policysubresource-integrity

What is the best method for updating audio from a source in Vue.js?

Forgive me if this is a silly question, but I'm still learning the ropes here. I may be going about this in all the wrong ways! I created a backend that learns from a text file and generates sentences along with an audio version of those sentences. I ...

javascriptnode.jsvue.jsaudio

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

javascripttypescript

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

Cryptocurrency price tracker with sleek Bitcoin symbol and FontAwesome icons

My assignment involved creating a function that retrieves Bitcoin trades from a JSON URL, allows users to change the interval with buttons, uses fontawesome arrows to indicate rate changes (up/down/no change), and displays the data on a website. Everythin ...

javascriptfont-awesomebitcointicker

Give it a little time before uploading a widget onto the page

As a newcomer to programming, I recently came across this code from an open source project. I am in the process of loading a widget onto a website. Instead of having the widget load instantly, I would like it to wait 10 seconds before displaying. Below i ...

javascripttypescript

JS/Apps Script: Passing object and its keys as function parameters

When working with Google Apps Script, I have a specific task that involves looping through data and writing only certain keys to a sheet. I want this looping operation to be done in a separate function rather than directly in the main function, as it will ...

javascriptjsongoogle-apps-script

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

jquerycssscroll

Exchange data using socket.io in nodejs and express with a different javascript file

Imagine having a JavaScript file that needs to interact with another JavaScript file in order to share data between them. For instance, let's consider a file named game_server.js. Within this file, there are two variables that we want to access in th ...

javascriptnode.jssocketsexpress

Instructions on integrating a column of buttons into a Bootstrap table containing information retrieved from a MySQL database

My bootstrap table is currently displaying data that is loaded from a MySQL database. I am looking to enhance it by adding a column with buttons, similar to the layout shown in this image. https://i.stack.imgur.com/8fWfR.png However, I am facing some dif ...

javascriptjqueryhtmlcsstwitter-bootstrap

Delete an entry from the localStorage

I am attempting to create a basic To-Do list using jQuery, but I have encountered an issue. This is my first time utilizing localStorage. After setting up the structure for my To-Do list, I wanted the items to remain visible when I refresh the page. Initia ...

javascriptjqueryhtmllocal-storage

Issue with customizing CSS in Fullcalendar Version 5 for Angular not functioning as expected

Currently, I am integrating Fullcalendar v5 into our Angular project and am looking to customize the Fullcalendar toolbar title color and size. In the styles.scss file, I inserted the following CSS code: .fc .fc-toolbar-title { font-size: 1.2em; color ...

htmlcssangularfullcalendarfullcalendar-5