Expand and collapse ul when click caret
Question
I have a problem in expanding ul item when i click the caret , i don't know why it's not working as official guide in w3schools said !
Here is my code :
<div class="row" style="width: 85%;margin-left: 100px;border: beige solid;">
<div class="row-same-height row-full-height">
<div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top"
data-desktop-cell="3" data-mobile-cell="7">
<section class="module-subnavigation component clearfix">
<nav>
<div class="col-md-12 bg-white subnavigation-accordianblock">
<h3 class="alt-secondary-head tertiary-trapezoid-bg image-title">
<span>About</span>
</h3>
<li class="subnavigation-list-group-item first-list">
About
<a data-toggle="collapse" href="#collapse1">
<span class="caret"
style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span>
</a>
<span class="pull-right icon-chevron-up" id="main-sub"
tabindex="0"></span>
</li>
<div id="collapse1" class="panel-collapse collapse">
<ul class="subnavigation-list-group first-menu dropdown-menu">
<li class="subnavigation-list-group-item">
Services
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Affiliates
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Mission
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Vision
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Values
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Strategy
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
People
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Clients
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Proficeincy Competencies
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Recognition
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Awards
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Corporate
Responsibility
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Thought Leaders
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Commitments
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top">
<div class="row">
<div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3">
<div class="parsys-row clearfix">
<section class="module-bodytext bg-white clearfix">
<div class="bodytext-data">
<br/>
<Br/>
<br/>
<p>KINS is one leading group of companies in UAE since 2010,member
companies play in important role in SMEs.with more than 50
people working to help a range of business opportunities and
challenges,improve their performance and increase value.
</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top">
<div class="row tmpl-row">
<div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6">
<section class="module-connectandrfp component clearfix">
<h4 class="primary-head" style="font-size: 32px;">
Connect with us
</h4>
<ul class="list-group">
<li class="list-group-item">
<span class="fa fa-map-marker pull-left"></span>
<a class="connectandrfp-connect-custom-padding"
href="http://www.makani.ae/desktop/index.html?"
title="Find office locations">
Makani No.3856698404
</a>
</li>
<li class="list-group-item" tabindex="0">
<span class="icon-email pull-left"></span>
<span id="contact-form-modal"
class="fa fa-envelope connectandrfp-connect-custom-padding"
data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html"
data-toggle="modal" data-target="#kpmgModal"
data-remote="/xx/en/home/misc/contact-form.html"
title="Email us">
<span style="color:#00338D;font-size: 15px;">info@kinsuae.com
</span>
</span>
</li>
<li class="list-group-item">
<span class="icon-users pull-left"></span>
<span class="fa fa-phone connectandrfp-connect-custom-padding"
aria-hidden="true"
style="font-size: 20px;">
<span style=" ">+971 (4) 25 75 928</span>
</span>
</li>
</ul>
<div class="connectandrfp-rfp">
<div class="rfp-space"><![CDATA[ ]]></div>
<div class="rfp-container">
<h4 class="tertiary-head">
<a href="/page/request_proposal">Request for proposal</a>
</h4>
<div class="rfp-cta-space"><![CDATA[ ]]></div>
<p class="pull-right">
<img class="rfp-loading hide"
src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/>
<span class="btn-cta rfp-modal" tabindex="0">
<span class="icon-chevron-right"></span>
</span>
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
Although i hava many of this <section class="module-bodytext bg-white clearfix"> I want that when ever i select li from ul it should show me a section ..should i use JQuery ?! could it be handled through just HTML and CSS and Bootstrap?
2 answers
solution1
0 2016-11-06 10:44:24
See the snippet. I think it's working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row" style="width: 85%;margin-left: 100px;border: beige solid;"> <div class="row-same-height row-full-height"> <div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top" data-desktop-cell="3" data-mobile-cell="7"> <section class="module-subnavigation component clearfix"> <nav> <div class="col-md-12 bg-white subnavigation-accordianblock"> <h3 class="alt-secondary-head tertiary-trapezoid-bg image-title"> <span>About</span> </h3> <li class="subnavigation-list-group-item first-list"> About <a data-toggle="collapse in" href="#collapse1"> <span class="caret" style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span> </a> <span class="pull-right icon-chevron-up" id="main-sub" tabindex="0"></span> </li> <div id="collapse1" class="panel-collapse"> <ul class="subnavigation-list-group first-menu dropdown-menu"> <li class="subnavigation-list-group-item"> Services <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Affiliates <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Mission <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Vision <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Values <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Strategy <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> People <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Clients <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Proficeincy Competencies <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Recognition <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Awards <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Corporate Responsibility <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Thought Leaders <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Commitments <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> </ul> </div> </div> </nav> </section> </div> <div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top"> <div class="row"> <div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3"> <div class="parsys-row clearfix"> <section class="module-bodytext bg-white clearfix"> <div class="bodytext-data"> <br/> <Br/> <br/> <p>KINS is one leading group of companies in UAE since 2010,member companies play in important role in SMEs.with more than 50 people working to help a range of business opportunities and challenges,improve their performance and increase value. </p> </div> </section> </div> </div> </div> </div> <div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top"> <div class="row tmpl-row"> <div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6"> <section class="module-connectandrfp component clearfix"> <h4 class="primary-head" style="font-size: 32px;"> Connect with us </h4> <ul class="list-group"> <li class="list-group-item"> <span class="fa fa-map-marker pull-left"></span> <a class="connectandrfp-connect-custom-padding" href="http://www.makani.ae/desktop/index.html?" title="Find office locations"> Makani No.3856698404 </a> </li> <li class="list-group-item" tabindex="0"> <span class="icon-email pull-left"></span> <span id="contact-form-modal" class="fa fa-envelope connectandrfp-connect-custom-padding" data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html" data-toggle="modal" data-target="#kpmgModal" data-remote="/xx/en/home/misc/contact-form.html" title="Email us"> <span style="color:#00338D;font-size: 15px;">info@kinsuae.com </span> </span> </li> <li class="list-group-item"> <span class="icon-users pull-left"></span> <span class="fa fa-phone connectandrfp-connect-custom-padding" aria-hidden="true" style="font-size: 20px;"> <span style=" ">+971 (4) 25 75 928</span> </span> </li> </ul> <div class="connectandrfp-rfp"> <div class="rfp-space"><![CDATA[ ]]></div> <div class="rfp-container"> <h4 class="tertiary-head"> <a href="/page/request_proposal">Request for proposal</a> </h4> <div class="rfp-cta-space"><![CDATA[ ]]></div> <p class="pull-right"> <img class="rfp-loading hide" src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/> <span class="btn-cta rfp-modal" tabindex="0"> <span class="icon-chevron-right"></span> </span> </p> </div> </div> </section> </div> </div> </div> </div> </div>
solution2
0 ACCPTED
Now solved :)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row" style="width: 85%;margin-left: 100px;border: beige solid;"> <div class="row-same-height row-full-height"> <div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top" data-desktop-cell="3" data-mobile-cell="7"> <section class="module-subnavigation component clearfix"> <nav> <div class="col-md-12 bg-white subnavigation-accordianblock"> <h3 class="alt-secondary-head tertiary-trapezoid-bg image-title"> <span>About</span> </h3> <li class="subnavigation-list-group-item first-list"> About <a data-toggle="collapse in" href="#collapse1"> <span class="caret" style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span> </a> <span class="pull-right icon-chevron-up" id="main-sub" tabindex="0"></span> </li> <div id="collapse1" class="panel-collapse"> <ul class="subnavigation-list-group first-menu"> <li class="subnavigation-list-group-item"> Services <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Affiliates <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Mission <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Vision <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Values <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Strategy <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> People <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Clients <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Proficeincy Competencies <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Recognition <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Awards <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Corporate Responsibility <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Thought Leaders <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> <li class="subnavigation-list-group-item"> Commitments <div class="subnavigation-accordiancontainer"> <ul class="subnavigation-list-group subnavigation-level"> </ul> </div> </li> </ul> </div> </div> </nav> </section> </div> <div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top"> <div class="row"> <div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3"> <div class="parsys-row clearfix"> <section class="module-bodytext bg-white clearfix"> <div class="bodytext-data"> <br/> <Br/> <br/> <p>KINS is one leading group of companies in UAE since 2010,member companies play in important role in SMEs.with more than 50 people working to help a range of business opportunities and challenges,improve their performance and increase value. </p> </div> </section> </div> </div> </div> </div> <div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top"> <div class="row tmpl-row"> <div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6"> <section class="module-connectandrfp component clearfix"> <h4 class="primary-head" style="font-size: 32px;"> Connect with us </h4> <ul class="list-group"> <li class="list-group-item"> <span class="fa fa-map-marker pull-left"></span> <a class="connectandrfp-connect-custom-padding" href="http://www.makani.ae/desktop/index.html?" title="Find office locations"> Makani No.3856698404 </a> </li> <li class="list-group-item" tabindex="0"> <span class="icon-email pull-left"></span> <span id="contact-form-modal" class="fa fa-envelope connectandrfp-connect-custom-padding" data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html" data-toggle="modal" data-target="#kpmgModal" data-remote="/xx/en/home/misc/contact-form.html" title="Email us"> <span style="color:#00338D;font-size: 15px;">info@kinsuae.com </span> </span> </li> <li class="list-group-item"> <span class="icon-users pull-left"></span> <span class="fa fa-phone connectandrfp-connect-custom-padding" aria-hidden="true" style="font-size: 20px;"> <span style=" ">+971 (4) 25 75 928</span> </span> </li> </ul> <div class="connectandrfp-rfp"> <div class="rfp-space"><![CDATA[ ]]></div> <div class="rfp-container"> <h4 class="tertiary-head"> <a href="/page/request_proposal">Request for proposal</a> </h4> <div class="rfp-cta-space"><![CDATA[ ]]></div> <p class="pull-right"> <img class="rfp-loading hide" src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/> <span class="btn-cta rfp-modal" tabindex="0"> <span class="icon-chevron-right"></span> </span> </p> </div> </div> </section> </div> </div> </div> </div> </div>
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
AngularJS binding issue in ngRepeat (Collapse and Expand Caret)
Expand on click, collapse on click outside
Q: Expand/Collapse a parent node when a click event fires
How to change the border style when click expand and collapse
Collapse when click on the expanded section and expand other section
Bourbon accordion click once expand/collapse when clicked
Collapse/Expand sidebar on button click
Dynamically expand/collapse on click of header
Collapse/Expand Accordion on Button Click
Collapse/Expand caret icon changing for all items instead of just one
Related Tags