bootstrap - components resize issues - html

I'm new to the world of UI design. I'm trying to get a basic page up & running with bootstrap. What I'm after is the underlying reason for using bootstrap which is to scale the page & it's components depending on the device on which the web page is loaded. I'm failing just with this very requirement :)
Here's the code I'm trying to get working
<div class="container-fluid">
<div class="row-fluid ">
<div class="row row-eq-height ">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
This code doesn't re-size all the contents of the web page being loaded. I see just half the contents when I click on "restore" button of the browser.
A few questions
1) My understanding of bootstrap is that it is mobile first technology meaning, if we were to develop for small devices, then it could scale up to anything big. Please correct me if I've misunderstood this. Hence, Does one have to specify, -xs-, -md- & -lg- for all the elements in question to get the re-size working or is specifying -xs- enough? If not, which of these should I specify so that the scaling automatically happens across any device.
2) Is responsive web design only about handling content re-sizing?
I'd highly appreciate any help to get me moving here please.

Can you please check this code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="row row-eq-height">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

Related

How to change the direction of drop down child menu for Arabic RTL through custom CSS?

We have a custom eCommerce website and below is the code for the categories list which is a drop-down menu.
<div id="nav-header" class="nav-header navbar-default">
<div class="container ">
<div class="row">
<nav class="ms-mb-0" role="navigation">
<div class="col-sm-3 col-md-3">
<!--navheader sidebar categories on home page-->
<div class=" hover-dropdown dropdown vertical-megamenu navheader-sidebar-category ">
<div class="ms-br-zero dropdown-toggle btn-primary" type="button"
id="dropdownMenu1" data-toggle="dropdown">
<div id="menu-icon">
{{'SHOP BY CATEGORIES'|msTranslate}}
<i class="fa fa-bars pull-right ms-pt-xs"></i>
</div>
</div>
<ul
class="list-group nav-ul-color dropdown-menu ms-br-zero ms-br-none ms-pt-0 ms-pb-0 ms-mt-0 ms-w-full ms-z-index20 ms-pos-absolute"
role="menu" aria-labelledby="dropdownMenu1" aria-expanded="true"
data-ng-init="show={}">
<li class="list-group-item ms-br-zero level1" role="presentation "
data-ng-repeat="category in navigation.header.links">
<a href="{{category.url}}" class="ms-p-0 ms-ws-normal"
title="{{category.title|msTranslate}}">
{{category.title}}
<span data-ng-if="category.children.length ">
<i class="fa fa-angle-right pull-right">
</i>
</span>
</a>
<ul ng-if="category.children.length" class="list-unstyled level2 vertical"
ng-style="{'column-count':{{getcount(category)}}}">
<div class=" ms-p-xs dropdownMenu-lvl2">
<div class="dropdownMenu-lvl3 ms-pr-xs ms-lh-25 ms-mb-s "
ng-repeat="subcategory in category.children">
<a href="{{subcategory.url}}"
title="{{subcategory.title|msTranslate}}">
{{subcategory.title}}
<i ng-if="subcategory.children.length"
class="fa fa-caret-left">
</i>
</a>
<ul class="list-unstyled level3"
ng-if="subcategory.children.length">
<li ng-repeat="subcategory2 in subcategory.children"
class="subcategory2 ">
<a href="{{subcategory2.url}}"
title="{{subcategory2.title}}"
class="level3-links ">
{{subcategory2.title}}
</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="list-group-item ms-br-zero level1" role="presentation ">
<a href="/allcategories" class="ms-p-0 ms-ws-normal"
title="{{'SEE ALL CATEGORIES'|msTranslate}}">
{{'SEE ALL CATEGORIES'|msTranslate}}
</a>
</li>
</ul>
</div>
</div>
If the language is English, subcategories show on the right side which is perfect as below:
But if the language is Arabic, subcategories show on the right side which is wrong because it is overflowing from the screen:
For Arabic, the menu should show on the left side of the screen.
I tried the following in the custom CSS but still the menu in Arabic doesn't show on the left side:
body .dropdownMenu1.dropdownMenu-lvl2,
body .dropdownMenu-lvl2.dropdownMenu-lvl3 {left:-250px !important;}
How to correct the code so that the menus in Arabic show on the left side.

how do I design this footer with bootstrap and responsible?

I'm trying to get this design out, but it just didn't work out. Where do I make mistakes? how can I do that? Can you please help me.
I couldn't write much as CSS. I haven't even gotten the footer part right in the Middle yet.
this is my codes:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2 footer-left ml-auto">
<p class="more-info-title">more info</p>
<ul class="footer-left-info ">
<li>about us</li>
<li>delivery info</li>
<li>FAQs</li>
<li>terms and conditions</li>
<li>privacy policy</li>
<li>rydale jobs</li>
<li>sitemap</li>
</ul>
</div>
<div class="col-lg-2 footer-center mx-auto">
dave smith
</div>
<div class="col-lg-2 footer-right mx-auto">
<p class="find-us-title">find us</p>
<ul class="footer-right-info">
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> rydale stockists
</a>
</li>
<li>
<a href="#">
<i class="fas fa-phone-alt"></i> shows & events
</a>
</li>
<li>
<a href="#">
<i class="far fa-envelope"></i> 01377 337160
</a>
</li>
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> contact us
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Use the order-N to reorganize the columsn on smartphone, for example
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>LEFT<br><br></p>
</div>
<div class="col-12 col-lg-6 order-1 order-lg-1 text-center">
<p><br><br>MIDDLE<br><br></p>
</div>
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>RIGHT<br><br></p>
</div>
</div>
</div>
</footer>

text unresponsive to css

I'm trying to change the color f my navbar buttons with the "white" class, but for some reason they are unresponsive to my css. The first html snippet is the unresponsive ones, and the second is where it worked fine.
.white {
color: #aaaeb5;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="white">About</li>
<li class="white">Who We Are</li>
<li class="white">Services</li>
</ul>
<div class="container-fluid">
<div class="row">
<footer class="footer">
<h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
<h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon#gmail.com</h5>
</div>
</div>
The reason behind this is the <a> tags. You have three options to do it:
adding class white to the <a> tags, not the parent <li> tags:
<ul class="nav navbar-nav navbar-right">
<li><a class="white" href="#About">About</a></li>
<li><a class="white" href="#Who We Are">Who We Are</a></li>
<li><a class="white" href="#Services">Services</a></li>
</ul>
adding !important to your CSS:
.white {
color: #aaaeb5 !important;
}
adding .white a to your CSS:
.white, .white a {
color: #aaaeb5;
}
I recommend option #1.
you need to target the links a to override the default color set by the browser:
.white a {
color: #aaaeb5;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="white">About</li>
<li class="white">Who We Are</li>
<li class="white">Services</li>
</ul>
<div class="container-fluid">
<div class="row">
<footer class="footer">
<h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
<a href="https://www.google.com/maps/place/290+Broadway,+Brooklyn,+NY+11211/#40.7083862,-73.9605364,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25be0961830a5:0xc6f496d3baa1bd27!8m2!3d40.7083862!4d-73.9583477">
<h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5>
</a>
<h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
<h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon#gmail.com</h5>
</div>
</div>

bootstrap footer does not cover entire width of page

I'm having trouble having my footer cover the whole page. it's fine on an extra large screen but when I test it on lg,md,sm, there is a margin on the right side that scrolls to the right. It extends the width of the screen larger than the size of the screen (viewport?). Here is some code I have.
<footer class="footer text-center" style="height:420px; margin-top:220px">
<div class="container">
<h1 class="text-secondary col-lg text-center col-md offset-md-1" style="margin-bottom:5%">Contact</h1>
<div class="row" style="height:200px; margin-top:-2%">
<div class="col-md-4 mb-5 col-lg-4 col-md" style="">
<h4 class="text-uppercase mb-4 text-secondary"><u>Get in touch</u></h4>
<div class="col-lg col-md" style="">
<p class="footer-contact text-primary text-left"><i class="fa fa-home"></i> 9416 Barry dr, Romulus, MI</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-phone"></i> 703-517-0030</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-envelope"></i> hellochrisyou#gmail.com</p>
</div>
</div>
<div class="col-lg-4 col-md-3 offset-md-2" style="background-color:#ffffff; margin-left:0.5%">
<h4 class="text-uppercase col-lg text-secondary text-center"><u>Social Media</u></h4>
<ul class="list-inline mb-0 footer-social">
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-facebook icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-google-plus icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-twitter icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-linkedin icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-github icon-margin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4" style="margin-left:-0.5%">
<h4 class="text-uppercase mb-4 text-secondary"><u>Popular Links</u></h4>
<div class="container-fluid">
<div class="row footer-wide"">
<ul class="nav navbar-nav col-lg text-center" style="margin-left:5%">
<li><a style="color:#d3d3d3" href="#section1">Home</a></li>
<li><a style="color:#d3d3d3" href="#section2">About Me</a></li>
<li><a style="color:#d3d3d3" href="#section3">Education</a></li>
<li><a style="color:#d3d3d3" href="#section4">Skills</a></li>
<li><a style="color:#d3d3d3" href="#section5">Portfolio</a></li>
<li><a style="color:#d3d3d3" href="#section6">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
thanks.
Chris
EDIT:
The issue with this is that when you use 100vw for example, the scroll bar is taken in account for. As most people recommend, always use max-width as 100% to avoid any browser scroll bars.
Add these rules to your html and body css tags
max-width: 100%;
overflow-x: hidden;
if you are using Bootstrap
Make sure that your container class is .container-fluid
if the body container is only .container, then you can make separate container for the footer class set to .container-fluid and make its style="padding:0;margin:0"
====================
<body>
<div class="container">
html coding......
</div>
<div class="container-fluid" style="padding:0;margin:0">
<footer>
html coding.......
</footer>
</div>
</body>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="source.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Navigation -->
<nav class="navbar navbar-default bg-secondary fixed-top" style="height:200px" id="mainNav" role="navigation">
<div class="container">
<div class="row">
<p class="navbar-brand font-title col-xl-4 offset-xl-4 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-3 text-center">Chris You</p>
</div>
<div class="row">
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section1">Home</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section2">About Me</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section3">Education</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section4">Skills</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section5">Portfolio</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section6">Contact</a>
</div>
</div>
</nav>
<!--image-->
<div class="row" style="margin-top:300px">
<img class="col-xl-2 offset-xl-5 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-4" src="me.gif">
</div>
<!--Description-->
<div class="jumbotron jumbo-header">
<div class="row">
<p class="about-title text-third text-center col-12"><strong>Software Developer</strong></p>
</div>
<p class="about-text text-primary text-left col-xl-4 offset-xl-4 col-lg-7 offset-lg-3 col-md-6 offset-md-3 col-sm-8 offset-sm-2"> Hi! I'm Chris. I am a very passionate software developer based in Detroit, MI. Highly motivated to write clean and effective code. I specialize in Java, C#, C++. Feel free to contact me!</p>
</div>

bootstrap 3 collapse div if not data-parent

Giving up on get all collapses closed when click another collapse.
I have several collapse groups running as a multi-level menu generated by php/mysql.
Basically it works very well, except for one tiny issue.
When i click a parent element from another group, i want all other parents closed.
A full HTML copy of my running menu can be seen here : jsFiddle
HTML:
<div class="panel panel-default">
<div class="panel-heading">Categories</div>
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Testcat<a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Testcat2
</li>
</div>
</div>
</div>
</div>
</div>
<div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Graphics Cards
</li>
</div>
<div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Keyboards
</li>
</div>
<div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Memory
</li>
</div>
<div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Mice
</li>
</div>
<div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Monitors
</li>
</div>
<div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Printers
</li>
</div>
<div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Speakers
</li>
</div>
</div>
</div>
<div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">Software<a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
</li>
<div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
<div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Simulation
</li>
</div>
<div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Strategy
</li>
</div>
</div>
</div>
<div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">DVD Movies<span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span>
</li>
<div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
<div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Cartoons
</li>
</div>
<div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Comedy
</li>
</div>
<div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Drama
</li>
</div>
<div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Science Fiction
</li>
</div>
<div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Thriller
</li>
</div>
</div>
</div>
<div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Gadgets
</li>
</div>
</div>
</div>
JS:
//if click chevron's
$('.toggleMe').click(function(){
var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open
});
on first load see all parents.
when click hardware chevron, menu expands.
But now when decide to click software , hardware stays open.
First of all, the collapsing of other panels is dependent on the DOM structure. Each panel should be wrapped in a div with the class '.panel'. You can refer the issue for more details.
Second, the data-parent attribute should refer to the element that wraps all the panels, which you want only one of them to be open.
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group panel" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
</div>
</div>
</div>
</div>
Here is your modified code http://jsfiddle.net/zbrhu/1/