Navigate to another tab by using javascript functions

Navigate to another tab by using javascript functions - javascript

friends,
I have created tabs using bootstrap.I am struggling to create this scenario.
By clicking on a submit button, active tab should switch to another tab.
<div id="checkout-progress">
<ul class="nav nav-tabs">
<li class="active"><i class="icon-map-marker icon-large"></i><span>Billing address</span></li>
<li><i class="icon-envelope icon-large"></i><span>Shipping address</span></li>
<li><i class="icon-truck icon-large"></i><span>Shipping method</span></li>
<li><i class="icon-money icon-large"></i><span>Payment method</span></li>
<li><i class="icon-search icon-large"></i><span>Order review</span></li>
</ul>
</div>
<div class="tab-pane active" id="tab1">
<div class="box-header">
<h3>Billing Address</h3>
</div>
<div class="box-footer">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Shipping Address <i class="icon-chevron-right"></i>
</button>
</div>
</div>
</div>
<div class="tab-pane active" id="tab2">
<div class="box-header">
<h3>Billing Address</h3>
</div>
<div class="box-footer">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Shipping Method <i class="icon-chevron-right"></i>
</button>
</div>
</div>
</div> ....
In tab1 by clicking onto the button it should switch to tab2 and so on. Kindly help. Thanks in advance

You are looking for something like this
$('#tab1').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})

Related

Bootstrap Wizard Issues

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.

comment the below div structure the error is dissappearing

After upgrading to Angular 5 I am facing this error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'ngIf: undefined'.
Current value: 'ngIf: null'.
If I comment the below div structure the error is disappearing
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
Any idea how to fix this?
<!-- language-all: lang-or-tag-here -->
<div class="playerpobUpBox playerWindow kPopupConfirmationBox" id="greaterAlertHeader">
<div class="row playerPopUpGridCollection playerPopUpContent lineHeightInputs">
<div class="playerContent"></div>
</div>
<div class="clearFloat"></div>
<div class="row playerPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id="greaterAlertOKHeader">OK</button>
</div>
<div class="clearFloat"></div>
<div class="clearFloat"></div>
</div>
<progress-circle></progress-circle>
<div class="leftSlider toggleShow">
<div class="fixedLeftSlider">
<div class="leftSliderBox">
<div class="stars-group" id="accordion">
<div class="stars stars-default recentsportss">
<div class="stars-heading active">
<h4 class="stars-title">
<a data-toggle="collapse" href="#recentsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{recentsportss}}
</a>
<span>{{lastTenViewsportss}}</span>
</h4>
</div>
<div id="recentsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul *ngFor="let item of recentsportssList; let k=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="k<20">
<span> {{item.packageName}}
<i id="pinToggle" class="recentsportssRightIcon" (click)="pinUnpin($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#pinnedSection" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{pinnedsportss}} & {{titles}}
</a>
</h4>
</div>
<div id="pinnedSection" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body pad0Imp">
<label class="pinnedsportsSubTitle">sportss</label>
<ul *ngFor="let item of pinnedsportssList; let i=index;">
<li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="i<20">
<span>{{item.packageName}}
<i id="pinToggle1" class="recentsportssRightIcon" (click)="pinUnpin1($event,item.sportsNo); $event.stopPropagation();"></i>
</span>
</li>
</ul>
<!--<ul>
<li>sports Number One<i class="recentsportssRightIcon"></i></li>
<li>sports Two<i class="recentsportssRightIcon"></i></li>
<li>sports Three<i class="recentsportssRightIcon"></i></li>
</ul>-->
<label class="pinnedsportsSubTitle borderTopTitle">Titles</label>
<ul *ngFor="let item of pinnedTitlesList;let k=index;">
<li class="recentList" (click)="navigateTitlePage($event,item.titleNo);$event.stopPropagation();" *ngIf="k<20">
<span>{{item.titleName}}
<i id="pinTitle1" class="recentsportssRightIcon" (click)="pinUnpintitle($event,item.titleNo);$event.stopPropagation();"></i>
</span>
</li>
<!--<li>Title Name Number One<i class="recentsportssRightIcon"></i></li>
<li>Title Name Number two<i class="recentsportssRightIcon"></i></li>
<li>Title Number 3<i class="recentsportssRightIcon"></i></li>-->
</ul>
</div>
</div>
</div>
<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
<div class="stars-heading">
<h4 class="stars-title">
<a data-toggle="collapse" href="#relatedsportss" aria-expanded="true">
<i class="fa fa-angle-right starsCaret"></i>
{{sportsServ?.relatedsportssHeading}}
</a>
</h4>
</div>
<div id="relatedsportss" class="stars-collapse collapse in" aria-expanded="true">
<div class="stars-body">
<ul>
<li *ngFor="let item of sportsServ?.relatedsportssData" (click)="selectedsports($event,item.sportsId,item.sportsName);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsId">{{item.sportsName}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="showHideLeftSliderBtn"></div>
</div>
</div>
<router-outlet></router-outlet>
<!--<div><sportsSearch style="display:none;" (sportsSearchEmitter)="sportsSearchEmitter($event)"></sportsSearch></div>-->

Probably you're getting this value asynchronously, you may try to:
Use changeDetection: ChangeDetectionStrategy.OnPush on your #Component (before selector), in your .ts file, don't forget to import changeDetection from "#angular/core";
Try to not get the value asynchronously, using setTimeout() function to get the value;
Inject cdr: ChangeDetectorRef on your module and import it from your "#angular/core", after that, on your implemented ngAfterViewChecked just put this.cdr.detectchanges.
To provide a better answer, you need to post your .ts code, and remove some lines to make the code cleaner. Hope it helps!

JQuery filtering a website onClick to remove certain divs or sections

I have a blog style website that I've placed a dropdown button at top of for the purpose of filtering the content. Each blog post will reside in section tags.
When user clicks on menu item it will trigger click event. I'm trying to save the href which the code seems to do fine.
Then i was hoping to iterate each a tag with the class of "label".
With each one that is found it should check the text and compare to value from dropdown box. If it matches keep the content. If not detach it. I thought detach was the best method since I would need to put it back on refresh and/or if user clicks on another selection in the dropdown.
Here's what I tried:
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive" />
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
JQuery:
<script>
$("a[role='sortmenuitem']").bind("click", function() {
var value = $(this).attr( 'id' );
$("a.label").each(function() {
if (this.text('value')) {
this.replace();
}
else {
this.detach();
}
});
});
</script>
If there is a better approach all together, I am all ears.
I thought about giving each blog section a class matching its category, and then using CSS to hide the element. If I am in the right ballpark please let me know.
Furthermore, once we hide the section not matching the dropdown menu item that is selected I'd need to put it back if another element is selected.
I am new (obviously) to JQuery. Any "dumbed down" explanation would be greatly appreciated!

I assume you want to hide/show the blog-post according to the current dropdown selection.
For the first, you need to change this line:
$("a.label")
to:
$(".blog-post .label")
because the label is associated to the span element under the blog-post section.
In order to test a value against a text you need to change this line:
this.text('value')
with:
$(this).text()
In order to hide/show the section inside the each loop you have to search for the closest blog-post parent section.
I added e.preventDefault() inside the click to stop navigation.
Moreover, as reported in the comment (Khalid T), instead to use bind you have to use on because its usage is deprecated.
So the snippet is:
$("a[role='sortmenuitem']").on("click", function(e) {
e.preventDefault();
var value = $(this).attr( 'href' );
$(".blog-post .label").each(function() {
$(this).closest('.blog-post').toggle($(this).text() == value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive"/>
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>

How to fetch content from panel to modal using jquery

I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>

Ddrag and drop and bootstrap UI Accordion

I have such code:
<div ui-tree>
<ol ui-tree-nodes="" ng-model="policies">
<li ng-repeat="item in policies" ui-tree-node>
<div ui-tree-handle>
<accordion>
<accordion-group>
<accordion-heading>
{{item.Title}}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{item.Content}}
<ol ui-tree-nodes="" ng-model="item.Options" data-nodrop>
<li ng-repeat="subItem in item.Options" ui-tree-node>
<div ui-tree-handle>
<accordion-group>
<accordion-heading>{{subItem.Title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading>
{{subItem.Content}}
</accordion-group>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
and when i click on header to roll over content of accordion bootstrap i get that drag and drop event is handled
how could i:
add to accordion-header some icon, with the help of which i could drag and drop all my nodes, and when i click on title my data get rolled as bootstrap do? Is it reall to hadle too events? and how?
https://github.com/JimLiu/angular-ui-tree
http://angular-ui.github.io/bootstrap/
upd:
<script id="template/accordion/accordion-group.html" type="text/ng-template">
<div class="panel panel-default">
<div class="panel-heading">
<h4 href class="btn btn-success btn-xs accordion-toggle pull-left" data-nodrag ng-click="toggleOpen();"><i class="glyphicon" ng-class="{'glyphicon-chevron-right': isOpen, 'glyphicon-chevron-down': !isOpen}"></i></h4>
<h4 class="panel-title">
<a href accordion-transclude="heading"><span>{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
</script>
<div ui-tree="options" data-drag-delay="20">
<ol ui-tree-nodes="" ng-model="articles">
<li ng-repeat="item in articles" ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>
{{item.Title}}
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</div>
drag and drop work only if i click on header text, or on body text (when on panel-title nothing is fired)
opening is on ng-click="toggleOpen();" and all is ok, just that drag and drop must be on whole element (cursor is for whole element, but drag-and-drop is only for element text)
how to be with scopes maybe?

Wrap <accordion-heading> content in a <div>
HTML accordion code
<accordion close-others="false">
<accordion-group is-open="isopen">
<accordion-heading ng-click="isopen=!isopen">
<div>{{item.Title}}</div>
</accordion-heading>
<div ng-bind-html="item.Content"></div>
<ol ui-tree-nodes="" ng-model="item.Options">
<li ng-repeat="subItem in item.Options " ui-tree-node>
<div ui-tree-handle>
<accordion close-others="false">
<accordion-group>
<accordion-heading>{{subItem.Title}}
</accordion-heading>
<div ng-bind-html="subItem.Content"></div>
</accordion-group>
</accordion>
</div>
</li>
</ol>
</accordion-group>
</accordion>
Hope this will help you.

Try to use $event.stopPropagation() on toggle accordion. In my case I added ui-tree-handle only on icon like this
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
Full code
<div ui-tree="options" data-max-depth="3">
<!-- Ranks list START -->
<div ui-tree-nodes data-type="rank" ng-model="taskbook.ranks">
<div ng-repeat="rank in taskbook.ranks"
class="panel panel-clean panel-solid panel-sortable"
ui-tree-node
ng-controller="RankListCtrl"
data-type="rank">
<!-- Rank Edit START -->
<div class="panel-heading clearfix"
ng-class="{'': isCollapsed, 'collapsed': !isCollapsed}">
<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle>
<span class="controls-item no-border">
<i class="glyphicon glyphicon-th-list text-sm text-gray"></i>
</span>
</div>
<h2 class="panel-title pull-left" ng-hide="isEditable">
<span ng-bind="rank.name | truncate:false:15"></span>
</h2>
<div class="inline-edit" data-nodrag ng-show="isEditable">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Rank name"
ng-model="rank.name"
focus-me="isEditable">
</div>
</form>
</div>
<div class="panel-controls right">
<button type="button"
class="controls-item btn btn-sm btn-danger btn-flat text-sm"
ng-hide="!isEditable"
ng-click="cancelEditable()">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="button"
class="controls-item btn btn-sm btn-success btn-flat text-sm"
ng-hide="!isEditable"
ng-disabled="rank.name === ''|| isSaving"
ng-click="hideEditable()">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div></div></div>
The only thing is that I did't use accordion. I implemented collapsed directive.
Hope this can help!
Good luck

Develop Reference

JavaScript is the programming language of the Web.

Navigate to another tab by using javascript functions - javascript

You are looking for something like this $('#tab1').click(function(){ var nextId = $(this).parents('.tab-pane').next().attr("id"); $('[href=#'+nextId+']').tab('show'); })

Related

Bootstrap Wizard Issues

comment the below div structure the error is dissappearing

JQuery filtering a website onClick to remove certain divs or sections

How to fetch content from panel to modal using jquery

Ddrag and drop and bootstrap UI Accordion

Categories

Resources