I have used Bootstrap collapse for three different div for different requirments.
First Collapse div : I need to change "glypicon-left and bottom icon" of "showing text and hide".
<div class="col-md-12">
<span class="badge">
<span>0</span>
</span>
<span> Function</span>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="fb_down_arrow">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
</div>
<ul class="fb_list_option collapse in" id="collapse1">
<li>
<input type="checkbox" id="c5" name="cc">
<label for="c5"><span></span>Corporate Real Estate</label>
</li>
</ul>
Second Collapse div : I need to change "glypicon-plus and minus" icon of "showing text and hide".
<li>
<input type="checkbox" id="c92" name="cc">
<label for="c92"><span></span>Construction (###)</label>
<a href="" data-toggle="collapse" data-target="#fb_plus_one" class="" >
<span class="glyphicon glyphicon-plus fb_list_plus_arrow"></span>
</a>
<ul id="fb_plus_one" class="collapse in" aria-expanded="true">
<li>
<input type="checkbox" id="c01" name="cc">
<label for="c01"><span></span>Child 1</label>
</li>
</ul>
</li>
Third Collapse div : I need to change "glypicon-left and bottom icon" and also change Text of "show more" , "less more" of showing text and hide.
See more detail <span class="glyphicon KB_glyphicon glyphicon-triangle-left"></span>
<div class="row collapse in" id="demo1" aria-expanded="true">
</div>
Script:
I am using below script archiving first collapse div requirement.kindly advise how to to archive second & third collapse.
// Collapse Start
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-left")
.removeClass("glyphicon-triangle-left")
.addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-bottom")
.removeClass("glyphicon-triangle-bottom")
.addClass("glyphicon-triangle-left");
});
// Collapse End
Please try this
$('.collapse').on('shown.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-left").first().removeClass("glyphicon-triangle-left").addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
e.stopImmediatePropagation()
$(this).parent().find(".glyphicon-triangle-bottom").first().removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-left");
});
Related
I want to send a text to a textbox on that "Text 1" Click
Here is my code:
HTML:
<td ng-show="table.similarParts">
<input ng-hide="item.is_new == false" type="text" class="form-control" uib-tooltip="You Can Filter Different Part Also" uib-tooltip-trigger="focus" uib-tooltip-placement="top"/>
</td>
<td class="wd-80" ng-show="table.similarParts">
<div class="btn-group" uib-dropdown="dropdown" ng-hide="item.is_new == false">
<button class="btn btn-default" type="button" data-keyboard="false" data-backdrop="static" uib-tooltip="Search This Part From Available Parts"" uib-tooltip-trigger="focus" uib-tooltip-placement="top"> <em class="fa fa-search"></em></button>
<button class="btn dropdown-toggle btn-default" type="button" uib-dropdown-toggle="">
<span class="caret"></span>
<span class="sr-only">default</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Text 1</a>
</li>
<li>
<a>Text 2</a>
</li>
</ul>
</div>
</td>
And Here is the Output:
I want to send this Text 1 to a TextBox Input on that "Text 1" Click ("Button is that magnifier glass")
You can use something like this :
Bind both select and input to the same ngModel:
Note: Given the logic here. CSS and other dropdown related changes i didn't make.
In controller:
On click of li ,the text value will be displayed in input text box.
angular.module('app', []).controller('dummy', function($scope) {
$scope.call= function(event){
$scope.valueText = angular.element(event.target).text();
}
});
<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="dummy">
<input type="text" ng-model="valueText" />
<ul class="dropdown-menu" role="menu" ng-click="call($event)">
<li><a>Text 1</a>
</li>
<li>
<a>Text 2</a>
</li>
</ul>
</div>
Hope this helps..!
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
Im using angular and ng-repeat to populate a list of studies. This list is dynamic so you can toggle into child elements of each element. So basically I have a accordion style toggle list that can go three levels deep on each list item. I have a jQuery issue that I think should be solved with some angular directive or something. Basically I have an arrow (glyphicon) that should switch to up or down depending on if your looking at a child or a parent element in this list. I have this working with pure jQuery just adding and removing a css class from each list item. However, it only works on the first item in the list because ng-repeat creates multiple id’s but jQuery will only work on the first element with that id tag.
This is the HTML from the page.
<!-- User Studies List -->
<div ng-controller="StudiesController" id="before">
<h3 class="center"> User Studies </h3>
<div ng-repeat="study in studies" arrow>
<div class="panel-group" style="margin-bottom:0">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" href="#collapse{{$index}}">
<h3 class="panel-title">{{ study.study }} <span class="glyphicon glyphicon-menu-down pull-right"></span></h3>
<p></p>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item" data-toggle="collapse" href="#collapse{{study.id}}" style="margin-left:1%" id="sampleID{{$index}}">
<i>Sample: </i>{{ study.sample }}
<span id="glyph-switch" class="glyphicon glyphicon-menu-down pull-right"></span>
<span id="glyph-up" class="glyphicon glyphicon-menu-up pull-right"></span>
</li>
<div id="collapse{{study.id}}" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item" style="margin-left:3%"><i>Fastq: </i>{{ study.fastq }}
<div class="dropdown center pull-right">
<button class="btn-xs btn-default hvr-shadow" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal" ng-click="showMore(study)">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal" ng-click="showMore(study)">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal" ng-click="showMore(study)">Delete</li>
</ul>
</div>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the Javascript
var count = 1;
$(document).on("click", "li[id*='sampleID']", function() {
console.log("clicked");
if(count > 0) {
$('#glyph-switch').css('visibility','hidden');
$('#glyph-up').css('visibility', 'visible');
count -= 1;
console.log("count", count);
} else {
$('#glyph-switch').css('visibility','visible');
$('#glyph-up').css('visibility', 'hidden');
count += 1;
console.log("count",count);
}
});
I would just use angular code (no jQuery at all).
Since you already have an object of studies, just handle an onClick="showGlyph($index)" passing the index and then in the code just set the a state for the up/down arrow $scope.GlyphUp = !$scope.GlyphUp.
In the template file have the up/down arrow object bind ng-show="GlyphUp"
How to toggle Element that is clicked and hide all other using bootstrap V3.5?
this is my code:
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>
DEMO page.
You should probably put the data-target attribute on the buttons themselves, but your code as is... use the following in jQuery:
$("button").on("click", function(){
var alertMsg = $(this).parent().data("target");
alert(alertMsg); //First grab the data-target from the button's parent, or alternatively the button itself as I would recommend.
//Note, you have a typo which I moved forward with below.
/* var itemToShow = "#" + alertMsg;
alert(itemToShow); */
// I would recommend as well you don't use hashtags in your data-*
// elements. Rather as shown here, add the hashtag in with code.
$("#itens .collapse").hide(); //first hide all of the elements
$(alertMsg).show(); //then show the element related to your button click event data-target id.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>
I am using bootstrap 3 and I have some collapsible panels which act as filters on a results page. So it isnt really an accordion menu as more than one can be open at any given time. Plus some will be open upon page load (using class in). So I need some javascript that will toggle the chevron depending on the state of the panel (opened or closed).
Here is the mark up:
<!-- Filter options -->
<div id="accordion">
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseOne" class="panel-collapse collapse in">
<ul class="list-unstyled">
<li class="selected"><span class="uxf-icon uxf-close-square"></span>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li class="selected"><span class="uxf-icon uxf-close-square"></span>Military Assistance</li>
<li>More...</li>
</ul>
</div>
</div>
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Geography<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseTwo" class="panel-collapse collapse">
<ul class="list-unstyled">
<li>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li>Military Assistance
</li><li>More...</li>
</ul>
</div>
</div>
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Person As Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseThree" class="panel-collapse collapse">
<ul class="list-unstyled">
<li>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li>Military Assistance
</li><li>More...</li>
</ul>
</div>
</div>
</div>
Obviously at the minute all of the panels have the chevron down icon.
Many thanks
Check the open/closed status of each div by looking for the in class.
Once set you can swap the chevron classes within a click event.
// onload
$('a[data-toggle=collapse]').each(function() {
var chevron = $(this).parent().next('div');
if ( chevron.hasClass('in') ) {
$(this).children('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
$(this).children('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
// click event
$('a[data-toggle=collapse]').click( function() {
// swap chevron
$(this).children('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Bootply