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/
Related
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.
Using Bootstrap 4.
I'd like to display a Twitter 'share' button within each accordion item when it's expanded.
I can get the button to display outside of the accordion, just not inside.
I think it has something to do with the class=="collapse" on the accordion <div>, because when I remove it the button displays. I have demonstrated this in my code, class="collapse" has been removed from one accordion item and it works.
My code is below, and a link the a fiddle.
I have commented the code showing where the button works and doesn't work.
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="row">
<div class="col-md-12">
<div id="accordion" role="tablist">
<!-- works here outside accordion -->
Tweet #share
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4367" href="#4367" aria-expanded="false" aria-controls="4367" class="collapsed">
item 1
</a>
</p>
</div>
<div id="4367" class="" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4367</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">fre</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- works here when class="collapse" removed from parent div -->
Tweet #share
</li>
</ul>
</div>
</div>
</div>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4368" href="#4368" aria-expanded="false" aria-controls="4368" class="collapsed">
item 2
</a>
</p>
</div>
<div id="4368" class="collapse" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4368</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">ita</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- doesnt work here -->
Tweet #share
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice is appreciated.
What you can do is change the class of the share link.
From class="twitter-hashtag-button" to class="fa fa-twitter"
So the code would look something like this :
<!-- doesnt work here -->
Tweet #share
After doing this just style the .fa class like
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
The updated fiddle
I have the following code section and I'm trying to put the badge on the rightmost part of the list-item, but somehow it keeps staying next to the text whatever I use ( style="float: right;" / class="pull-righ" / class="float-righ")
<div class="row" style="margin-top: 30px;">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item active"><h4>Groups</h4></li>
#foreach($project->groups()->get() as $key=>$group)
<li class="list-group-item list-group-item-action" id="{{$group->name}}">{{$group->name}}<span class="badge badge-default pull-right"> {{$group->jobs()->count()}}</span></li>
#endforeach
</ul>
</div>
</div>
DEMO: https://jsfiddle.net/v4udh4Lc/7/
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>
Like this, bootstrap 3:
| tab1 | tab2 | tab3 | button
<div class="row">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<div class="btn-group pull-right">
<button class="btn btn-default navbar-btn pull-right" >123</button>
</div>
</div>
If you want to place multiple elements in a single row you can use the bootstrap grid system. For details see: http://getbootstrap.com/examples/grid/
Your code could then look like:
<div class="row">
<div class="col-xs-8">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home
</li>
<li role="presentation">Profile
</li>
<li role="presentation">Messages
</li>
</ul>
</div>
<div class="col-xs-4">
<div class="btn-group pull-right">
<button class="btn btn-default navbar-btn pull-right">123</button>
</div>
</div>
</div>
For working a example see here: https://jsfiddle.net/qmjmtx27/1/