firstly here's the fiddle: http://jsfiddle.net/krish7878/6xpdeLa6/39/
The icons need to change based on the state of collapse/accordion, I want to keep a panel open always (user cannot close all the accordions) and have the necessary JS too. But the problem is when the default panel is open and user click's on it the accordion does not close but the icon changes. That has something to do with the initial js. I am not very through with javascript, any help would be appreciate.
HTML Code:
<div class="sub-menu-1 panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
FASHION
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Man
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Women
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Children
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Infants
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div>
</div><!-- /#collapseOne -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
SPORTS
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Gear
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Shoes
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Discounted Stuff
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 3
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div><!-- /.panel-body -->
</div><!-- /#collapseTwo -->
</div><!-- /.panel -->
</div><!-- /.sub-menu-1 -->
JS Code:
$(document).ready(function(){
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading a').click(function(){
$('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
$(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
$(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
});
});
// Keeps at least one collapse panel open
$('.panel-heading a').on('click',function(e){
if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
e.preventDefault();
e.stopPropagation();
}
});
Modify your first section of code like this:
$(document).ready(function(){
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading a').click(function(){
if(!$(this).parents('.panel').children('.panel-collapse').hasClass('in')){
$('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
$(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
$(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
}
});
});
The added if statement:
if(!$(this).parents('.panel').children('.panel-collapse').hasClass('in'))
check if clicked panel already open or not and change the icon if it's not already open.
Check JSFiddle Demo
Related
I write this code:
$('.toggler').click(function() {
$(this).parent().nextAll('ul').toggleClass('closed');
if ($(this).parent().next('ul') != true) {
$(this).prev().removeClass('ion-ios-plus-outline');
$(this).prev().addClass('ion-ios-minus-outline');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<!-- First level -->
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول اول</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
<!-- Second level -->
<ul class="closed">
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول دوم</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
</li>
</ul>
</li>
<!-- First level -->
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول اول</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
</li>
</ul>
I have a condition in this click function, it works nice. but it just works when I click on that button, but I want this condition to work outside this click function!
I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">
I'm trying to do the mail box. Codes I want to hide my mail I get mail all the details of the show and yet does not work.
Show/Hidden class id='Detay'
Nuget Package = MimeKit
Show part
Clicked javascript I want to hide the data-side was the same.
<span onclick="Goster()" class="sender" data-id="#item.MessageId" title="#item.From">#item.From </span>
It was to hideShow/hidden
<div id="Detay" data-id="#item.MessageId" style="display: none">
hidden button
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
javascript code
<script type="text/javascript">
function Gizle() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'none';
}
function Goster() {
var divObject = document.getElementById('Detay');
divObject.style.display = 'block';
}
</script>
each html element must have a unique id,
in your code you are assigning the same id to multiple div elements inside a foreach loop! you have to make it unique by adding a number for example;
<!--Show / Hidden to be part-->
<div id="Detay#(item.MessageId)" style="display: none">
when you will call show/hide you can parse the id like below:
<span onclick="Goster('Detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
and for hiding use this:
<b onclick="Gizle('Detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
finally you have to modify you javascript to accept the id parameter:
<script type="text/javascript">
function Gizle(id) {
$('#'+id).toggle(false);
}
function Goster(id) {
$('#' + id).toggle(true);
}
</script>
[UPDATE]
Full solution:
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon">#Html.ActionLink("Ana Sayfa", "Index", "Home")</i>
</li>
<li class="active">Mail Kutusu</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="col-xs-12">
<div class="tabbable">
<ul id="inbox-tabs" class="inbox-tabs nav nav-tabs padding-16 tab-size-bigger tab-space-1">
<li class="active">
<a data-toggle="tab" href="#inbox" data-target="inbox">
<i class="blue ace-icon fa fa-inbox bigger-130"></i>
<span class="bigger-110">Gelen Kutusu</span>
</a>
</li>
<li>
<a data-toggle="tab" href="#sent" data-target="sent">
<i class="orange ace-icon fa fa-location-arrow bigger-130"></i>
<span class="bigger-110">Sent</span>
</a>
</li>
</ul>
<div class="tab-content no-border no-padding">
<div id="inbox" class="tab-pane in active">
<div class="message-container">
<div class="message-navbar clearfix">
<div class="message-bar">
<div class="message-infobar" id="id-message-infobar">
<span class="blue bigger-150">Mesaj Kutusu</span>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list">
<!--<div class="message-item message-unread"> okunmamış-->
#foreach (var item in client.OrderByDescending(p => p.Date))
{
<div class="message-item">
<label class="inline">
<span class="lbl"></span>
</label>
<!--Show/Hidden Click-->
<span onclick="Goster('detay#(item.MessageId)')" class="sender" title="#item.From">#item.From </span>
<span class="time">#mvcHelper.saatAyarla(item.Date)</span>
#if (item.Attachments.Any())
{
<span class="attachment">
<i class="ace-icon fa fa-paperclip"></i>
</span>
}
<span class="summary">
<span onclick="Goster('detay#(item.MessageId)')" class="text">
#item.Subject
</span>
</span>
</div>
<!--Show / Hidden to be part-->
<div id="detay#(item.MessageId)" style="display: none">
<div class="message-container">
<div id="id-message-list-navbar" class="message-navbar clearfix hide">
<div>
<div class="messagebar-item-right">
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Sort
<i class="ace-icon fa fa-caret-down bigger-125"></i>
</a>
<ul class="dropdown-menu dropdown-lighter dropdown-menu-right dropdown-100">
<li>
<a href="#">
<i class="ace-icon fa fa-check green"></i>
Date
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
From
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-check invisible"></i>
Subject
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="id-message-item-navbar" class="message-navbar clearfix">
<div class="message-bar">
</div>
<div>
<div class="messagebar-item-left">
<a href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left blue bigger-110 middle"></i>
<b onclick="Gizle('detay#(item.MessageId)')" class="bigger-110 middle">Geri</b>
</a>
</div>
<div class="messagebar-item-right">
<i class="ace-icon fa fa-clock-o bigger-110 orange"></i>
<span class="grey">#mvcHelper.saatAyarla(item.Date)</span>
</div>
</div>
</div>
<div id="id-message-new-navbar" class="hide message-navbar clearfix">
<div>
<div class="messagebar-item-left">
<a onclick="Gizle()" href="#" class="btn-back-message-list">
<i class="ace-icon fa fa-arrow-left bigger-110 middle blue"></i>
<b onclick="Gizle" class="middle bigger-110">Geri</b>
</a>
</div>
</div>
</div>
<div class="message-list-container">
<div class="message-list hide" id="message-list"></div>
<div class="message-content" id="id-message-content">
<div class="message-header clearfix">
<div class="pull-left">
<span class="blue bigger-125"> #item.Subject </span>
<div class="space-4"></div>
<i class="ace-icon fa fa-star orange2"></i>
<img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32">
#item.From
<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
<span class="time grey">#mvcHelper.saatGoster(item.Date)</span>
</div>
</div>
<div class="hr hr-double"></div>
<div style="position: relative;" class="message-body ace-scroll">
<div style="display: block; height: 150px;" class="scroll-track scroll-visible scroll-active">
<div style="height: 127px; top: 0px;" class="scroll-bar"></div>
</div>
<div style="max-height: 150px;" class="scroll-content">
<p>
#item.GetTextBody(TextFormat.Plain)
</p>
</div>
</div>
<div class="hr hr-double"></div>
#if (item.Attachments.Any())
{
<div class="message-attachment clearfix">
<div class="attachment-title">
<span class="blue bolder bigger-110">Ekler</span>
<span class="grey">#item.Attachments.Count()</span>
<div class="inline position-relative">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="ace-icon fa fa-caret-down bigger-125 middle"></i>
</a>
<ul class="dropdown-menu dropdown-lighter">
<li>
Download all as zip
</li>
<li>
Display in slideshow
</li>
</ul>
</div>
</div>
<ul class="attachment-list pull-left list-unstyled">
#foreach (var attachment in item.Attachments)
{
<li>
<a href="#" class="attached-file">
<i class="ace-icon fa fa-file-o bigger-110"></i>
<span class="attached-name">#mvcHelper.getAttachmentName(attachment.ToString())</span>
</a>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-download bigger-125 blue"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-trash-o bigger-125 red"></i>
</a>
</span>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
</div>
}
<!--ForEach End-->
</div>
</div>
<div class="message-footer clearfix">
<div class="pull-left"> Total</div>
<div class="pull-right">
<div class="inline middle"> page 1 of 16 </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-step-backward middle"></i>
</span>
</li>
<li class="disabled">
<span>
<i class="ace-icon fa fa-caret-left bigger-140 middle"></i>
</span>
</li>
<li>
<span>
<input value="1" maxlength="3" type="text">
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-caret-right bigger-140 middle"></i>
</a>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-step-forward middle"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="hide message-footer message-footer-style2 clearfix">
<div class="pull-left"> </div>
<div class="pull-right">
<div class="inline middle"> </div>
<ul class="pagination middle">
<li class="disabled">
<span>
<i class="ace-icon fa fa-angle-left bigger-150"></i>
</span>
</li>
<li>
<a href="#">
<i class="ace-icon fa fa-angle-right bigger-150"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- /.tab-content -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function Gizle(detayId) {
$('#'+detayId).toggle(false);
}
function Goster(detayId) {
$('#'+detayId).toggle(true); }
</script>
I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.
This is what I have so far:
$(document).ready(function(){
// Hide other drop downs when opening another
// $(".hideothers").hide();
// $(".show_hide_account").click(function(){
// $(".slidingDiv_account").slideToggle();
// });
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.
Thank you.
$(document).ready(function(){
function slideAllUp(obj)
{
$(".hideothers").each(function(){
if ($(this)[0] != obj[0])
{
$(this).slideUp(); //perform on all except self.
}
})
}
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
slideAllUp($(".slidingDiv_account"));
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
slideAllUp($(".slidingDiv_work"));
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account ">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work dropdown">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
This edit introduces a function called slideAllUp. It passes over all ULs with the class .hideothers. When calling the slideAllUp you need to pass the ul that isn't supposed to go up. This way it closes all others and opens the one clicked upon. The exception is there to allow the menu to close again.
Here's the fiddle: http://jsfiddle.net/krish7878/6xpdeLa6/
There are two div's .panel-heading and .panel-collapse. If .panel-collapse has class 'in' then a icon has to be added to .panel-heading. I have the jquery for it but the problem is the icons do not update when the class changes.
HTML Code:
<div class="sub-menu-1 panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
FASHION
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Man
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Women
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Children
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Infants
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div>
</div><!-- /#collapseOne -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
SPORTS
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Gear
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Shoes
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Discounted Stuff
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 3
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div><!-- /.panel-body -->
</div><!-- /#collapseTwo -->
</div><!-- /.panel -->
JS Code:
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
I think the code needs to be run each time the class changes but I'm not sure how to do it, any help would be appreciated.
JSFIDDLE
You can do like following:
$(document).ready(function(){
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading a').click(function(){
$('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
$(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
$(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
});
});