Expanding and collapsing in UL tag - javascript

I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
});
});
$("#collapsebutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
});
});
});

It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
<span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
<br />
<span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
<br />
<span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
<br />
</li>
</ul>
</div>

Related

Get direct children Elements at any depth

I'm working on a Comments system whose listing has, in its essence, the following format:
body {
font-size: 1.15rem;
}
.comment {
display: flex;
padding: 1rem;
}
.comment .message {
margin: 0 1rem;
}
.comment .replies {
margin-left: 15px;
}
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.dots {
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Lorem ipsum dolor
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #1
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Reply #2
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #3
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<svg id="dots" viewBox="0 0 24 24">
<path d="M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z"/>
</svg>
</div>
</svg>
As you can see, comments have an identifier data-attribute with authors' usernames and each Comment has a toolbox of sorts, which I've simplified to one action here.
In this simple example, when the User clicks the *Follow entry, it should flip all of Bootstrap's d-none class on .follow and .unfollow on all toolboxes belonging to that author, so it's possible to Follow/Unfollow without reloading the Page.
Initially, I tried:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $toolbox = $( sprintf( '[data-author="%s"] .tools', username ) );
sprintf() is a 3rd-party component because I honestly don't really like Template Literals
An honest attempt, but when I wrote it I forgot that this would also bring all matching Elements from child selectors. For example, if the variable username above had the value author1, entries on author2 toolbox would also be changed.
Then I've narrowed the selector:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comment = $( sprintf( '[data-author="%s"] .tools', username ) );
const $toolbox = $comment.children().find( '.tools' );
While it solved the previous problem, it created a new one: now entries nested within .replies, even those that DID match the data-attribute, would not change.
Then I tried something silly:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comments = $( sprintf( '[data-author="%s"]', username ) );
$comments.each( ( _offset, comment ) => {
const $this = $( comment );
const $toolbox = $this.children().find( '.tools' );
$toolbox.find( 'li.follow' )
.addClass( 'd-none' )
.siblings( 'li.unfollow' )
.removeClass( 'd-none' );
});
And it worked perfectly, but I'm executing the same instructions over and over and over again N times as the data-attribute matches.
How could I accomplish that more efficiently?
[EDIT]
In this very minimalist scenario, the Child Combinator Selector (>) does the trick, however, in the real layout made with Bootstrap Grid, it doesn't. For reference, this is an example of the whole CSS Path:
div#comment_1212130616.comment.gx-0 div.row.gx-3.profile div.col.align-self-center div.row div.col-2.d-flex.flex-row.justify-content-end.tools

Selecting Div Rows to highlight it one at a time

[enter image description here][1]I am creating an examination appointment, and I wanted to highlight the selected row as green each time I clicked on it one at a time. The data in the rows are from the database. I tried to put class directly inside the div but the two rows were highlighted.
Thank you in advance
here's the output
$(document).on('click', '.selectdate', function(){
var selected = $('#walakapake').hasClass("highlight");
$("walakapake").removeClass("row");
if(!selected)
{
$('#walakapake').addClass("row highlight");
}
});
<style type="text/css">
#table-wrapper {
position:relative;
}
#table-scroll {
height:500px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#walakapake:hover{
background-color: #fafafa;
}
.highlight { background-color: red; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</script>
<div id="table-wrapper">
<div id="table-scroll">
<div class="container" >
<a name="submitting" class="selectdate" id="1">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">24</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Sunday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
<br>
<br>
<a name="submitting" class="selectdate" id="2">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">23</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Saturday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
</div>
</div>
</div>
$('.foo').click(function() {
$('.foo').removeClass('highlight'); //Removes every highlight
$(this).addClass('highlight'); //sets highlight to the clicked one
});
.highlight {
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="foo">Element 1</li>
<li class="foo">Element 2</li>
<li class="foo">Element 3</li>
</ul>

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

custom dropdown menu doesn't close on click and other multiple issues

Hi guys i have an issue with our dropdown menu nested inside an accordion.
please note that the menu is visible in small displays such as phones.
now what the dropdown does is when you click it, it fires perfectly, but it pushes other links beside it, secondly the drop down doesnt close when you click on a different area of the page, and lastly when a dropdown is active, then click a different dropdown link it automatically goes to the first link within that dropdown
here is the html:
<div id="accordion" class="col-xs-12 col-sm-12 hidden-md hidden-lg">
<div class="accordion-toggle text-center">
<div class="bars"></div>
<div class="bars"></div>
<div class="bars"></div>
</div>
<div class="accordion-content test_dd_fix">
<ul class="list-inline">
<volist name="category_tree" id="vo1">
<li class="nav_li">
<a <if condition="$vo1[id]==43 || $vo1[id]==22">
style="color:red"
<else /></if>class="" href="{:U('Goods/index?category_id='.$vo1['id'])}">{$vo1.title}
</a>
<notempty name="vo1._child">
<div class="nav_erji">
<div class="nav_erji_dropdown" >
<volist name="vo1._child" id="vo2">
<div class="nav_erji_div">
<h4>{$vo2.title}</h4>
<notempty name="vo2._child">
<ul class="list-inline">
<volist name="vo2._child" id="vo3">
<li>{$vo3.title}</li>
</volist>
</ul>
</notempty>
</div>
</volist>
<div>
<volist name="category_adv" id="vo">
<switch name="vo.target_type">
<case value="1">
<a class="font_shift" href="{$vo.target_data}" target="_blank">
<div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
<h2>{$vo.title}</h2>
</a>
</case>
<case value="2">
<a href="{:U('Goods/detail?id='.$vo['target_data'])}" target="_blank">
<div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
<h2>{$vo.title}</h2>
</a>
</case>
<case value="3">
<a href="{:U('Goods/index?category_id='.$vo['target_data'])}" target="_blank">
<div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
<h2>{$vo.title}</h2>
</a>
</case>
<case value="4">
<a href="{:U('Article/detail?id='.$vo['target_data'])}" target="_blank">
<div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
<h2>{$vo.title}</h2>
</a>
</case>
</switch>
</volist>
</div>
<div class="clear"></div>
</div>
</div>
</notempty>
</li>
</volist>
</ul>
<ul>
<li>
Shop By Brands
</li>
</ul>
and this is the css:
.nav_erji_dropdown {background-color:#000; position: absolute !important ;z-index: 1000 !important;}
.nav1{position:relative;background:#fff;}
.nav1 .nav_li{float:left;color:#ffffff;}
.nav1 .nav_li .nav_1{display:block;color:#ffffff;margin-right:30px;height:55px;line-height:55px;font-size:14px;margin-bottom:-2px;}
.nav1 .active .nav_1{border-bottom:2px solid #EDCC27}
.test_dd_fix {overflow: visible !important; }
.nav1_erji{position:relative;top:57px;left:0px;right:0px;background:#fff;display:none;}
.nav1_erji.active {display:block;}
.nav1_erji .wra1{margin:20px auto;}
.nav1_erji_div{float:left;width:240px;padding-right:100px;}
.nav1_erji_div h4{font-size:14px;font-weight:normal;height:30px;line-height:30px;padding-bottom:10px;margin-bottom:10px;}
.nav1 .nav1_li .nav1_erji_div ul li a{height:30px;line-height:30px;border:none;padding:0px;font-size:12px;}
so far this is the only javascript i added
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});
});
</script>
its a lot of issue but i would really appreciate it if we could fix this together, thanks guys!

bootstrap accordion menu

My problem is that i used the bootstrap accordion menu for my wordpress site.
Every menu item has sub menus as links so whenever I clicked on any link it toke me to another page meaning the page reloaded, but the accordion menu gets closed and I want it to remain open with the selected link.
My whole site is on bootstrap. I am new to wordpress so don't even know that which jquery function is working on this accordion menu.
Here is my code for accordion menu:
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">B.A Honours Programmes</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Fashion Design
</div>
<div class="accordion-inner">
Fashion Styling & Image Design
</div>
<div class="accordion-inner">
Textile Design for Fashion And Interiors
</div>
<div class="accordion-inner">
Communication Design
</div>
<div class="accordion-inner">
Interior Architecture and Design
</div>
<div class="accordion-inner">
Interior Product Design
</div>
<div class="accordion-inner">
Jewellery Design
</div>
<div class="accordion-inner">
Fashion Media Communication
</div>
<div class="accordion-inner">
Fashion Business Management
</div>
<div class="accordion-inner">
Fashion Marketing and Retailing Management
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Postgraduate Diploma Programmes</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Fashion Design
</div>
<div class="accordion-inner">
Textile Design
</div>
<div class="accordion-inner">
Fashion Retail
</div>
<div class="accordion-inner">
Fashion Marketing
</div>
<div class="accordion-inner">
Garment Manufacturing
</div>
<div class="accordion-inner">
Fashion Merchandising
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Masters Programmes</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
MA Design(Fashion and Textile)
</div>
<div class="accordion-inner">
MA Fashion Marketing
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Professional Programmes</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
Luxury Brands
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2">Diploma Programmes</a>
</div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
Visual Merchandising & Store Design
</div>
<div class="accordion-inner">
Professional Photography with BTK Germany
</div>
<div class="accordion-inner">
Digital Film Making
</div>
<div class="accordion-inner">
Creative Graphic Design
</div>
<div class="accordion-inner">
Styling for Interiors
</div>
<div class="accordion-inner">
Fashion & Lifestyle Ecommerce
</div>
<div class="accordion-inner">
Fashion Media Makeup
</div>
<div class="accordion-inner">
New Media Design
</div>
<div class="accordion-inner">
Retail Operations
</div>
<div class="accordion-inner">
Entrepreneurship and Business Management for Creative Industries
</div>
<div class="accordion-inner">
Apparel Manufacturing
</div>
<div class="accordion-inner">
Interior Styling
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2">Certificate Programmes</a>
</div>
<div id="collapseSix" class="accordion-body collapse">
<div class="accordion-inner">
Creative Fashion & Technology in Women's Wear
</div>
<div class="accordion-inner">
Apparel Marketing & Merchandising
</div>
<div class="accordion-inner">
Personal Styling & Grooming
</div>
</div>
</div>
</div>
Here is the CSS for accordion menu resides in bootstrap.css:
.accordion {
margin-bottom: 20px;
}
.accordion-group {
margin-bottom: 2px;
/*border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.accordion-heading {
border-bottom: 0;
background-color:#cccccc;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 2px 4px;
text-decoration:none;
/*background-color:#e52b27;*/
}
.accordion-toggle {
cursor: pointer;
color:#5e5e5e;
text-decoration:none;
}
.accordion-inner {
padding: 2px 4px;
border-top: 1px solid #e5e5e5;
text-decoration:none;
}
and I think this is the JS working on it (not sure):
/* COLLAPSE PUBLIC CLASS DEFINITION
* ================================ */
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options.parent) {
this.$parent = $(this.options.parent)
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension
, scroll
, actives
, hasData
if (this.transitioning) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))
actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension
if (this.transitioning) return
dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', $.Event('hide'), 'hidden')
this.$element[dimension](0)
}
, reset: function (size) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function (method, startEvent, completeEvent) {
var that = this
, complete = function () {
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element.trigger(completeEvent)
}
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.transitioning = 1
this.$element[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
Here's what you should do. Throw away the code you've written, because you're misusing accordions. To make a navigation with dropdowns, here's an example.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">
Nav header
</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
EDIT:
To open an accordion on page load, this should work:
Assign the accordion you want to be opened class="open-accordion" and add to your javascript file or within <script></script> the following snippet:
$('.open-accordion').on('hidden', function () {
$('.open-accordion').collapse('show')
})
I haven't tested it, but should work according to bootstrap documentation.
<ul class="accordion">
<li id="one" class="files">
Admin Video
<ul class="sub-menu">
<li><em>01</em>Add video</li>
<li><em>02</em>List Video</li>
<li><em>03</em>Video Categories</li>
</ul>
</li>
<li id="two" class="mail">
Users
<ul class="sub-menu">
<li><em>01</em>Subscribers List</li>
<li><em>02</em>User Video Suggestion</li>
</ul>
</li>
<li id="three" class="cloud">
<a class="active" href="#three">Background Image options</a>
<ul class="sub-menu">
<li><em>01</em>Add</li>
<li><em>02</em>List</li>
</ul>
</li>
</ul>
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
$.each($(".accordion > li > a"), function(){
if($(this).attr('class') == 'active')
{
$(this).next().slideDown('normal');
}
});
// Open the first tab on load
//accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});

Categories