Trying to create an accordion menu and when I click on the title of the question, the answer doesn't appear or collapse, why is this?
Question
I am trying to create an accordion menu that allows me to make my answers hidden and only appear at the click of the question. For some reason when you click on the question nothing happens.
my code:
.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; } }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <body> <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-target="accordionCollapse-1" 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> <script src='https://code.jquery.com/jquery-2.1.0.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script> </body>
Expected: Accordion menu should appear and collapse when you click the question.
Actual: When you click on the question nothing happens.
1 answers
solution1
0 ACCPTED 2019-05-31 14:49:46
If you declare the data-target it has to be a normal CSS selector, so change data-target="accordionCollapse-1" to data-target="#accordionCollapse-1" since you try to open a div that has an id attribute.
Refer to the documentation for more info!
.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-target="#accordionCollapse-1" 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>
Also, at this moment the data-target is set to the h5 tag and not the surrounding container. To fix this you have to remove the following attributes of your h5 tag and add them to your div with the id="accordionHeading-1" :
-
data-target="#accordionCollapse-1" -
data-area-expanded="true" -
data-aria-controls="accordionCollapse-1"
I also added CSS to give the box 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Collapse menu doesn't close when I click on toggler button
Accordion doesn't collapse
Why doesn't my collapsible menu expand when I click on it?
Sidebar menu doesn't collapse on click
Why at extra small screen size, my collapse button doesn't open when i click on it?
jQuery Accordion - doesn't collapse
I can't get my jQuery accordion to collapse on click?
Accordion doesn't collapse properly when having multiple accordions
I'm trying to answer Hackeranks data structure question and i don't know why this function fails
Why the div doesn't appear where I right-click?
Related Tags