i've got a question.
Is there any way to collapse and switch back bootstrap panel programmatically.
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i>
</button>
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
I need to collapse it or expand with some handler.
Try this:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i> Click me
</button>
DEMO
Related
When I type in my textarea once has dected more than 4 characters it enables the preview tab.
If I click on my editor buttons example the button-bold it shows text like **strong text** but even though there is more than 4 characters preview tab does not enabled.
Currently It only enabled when keyup
Question: How can I make sure if I click on a editor button it will
dected how many characters and if greater than 4 will enable tab.
CodePen Example Demo
$('#tab-preview').hide();
$("#textarea_message").on('keyup', function(e){
if ($(this).val().length >= "4") {
$('#tab-preview').show();
}
if ($(this).val().length < "4") {
$('#tab-preview').hide();
}
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<form id="form-ask">
<div class="form-group">
<button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i>
</button>
<button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i>
Attach File</button>
</div>
<div class="panel ask panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li>
<li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="ask">
<div class="form-group">
<textarea id="textarea_message" class="form-control"></textarea>
</div>
</div>
<div class="tab-pane fade" id="preview">
<div class="preview-message"></div>
</div>
</div>
</div>
</div>
<p class="text-muted">Preview Button will be enabled once your question has reached
4 character or more.</p>
</form>
</div>
</div>
</div>
One solution would be to add a 'trigger' for the keyup event on your buttons
$('#button-bold').on('click', function(e) {
markdown_syntax(this.id, "**", "**", 'strong text');
$("#textarea_message").trigger('keyup');
});
I published the still not finished website just to show you what I want
In this website:
http://urbanphenomena.net/shukri/#page3
the iFrame is redirecting to different images in different pages when the user clicks a specific link. Here is the code if needed:
<!--- Projects Section --->
<div class="section projects-section container-fluid" id="section4">
<div class="row">
<div class="col-lg-2 pull-left">
<div class="panel-group" id="accordion">
<div class="panel">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
</h4>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!--- FAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOne">
<h5>FAF</h5>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
</ol>
</div>
<!--- KSAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseTwo">
<h5>KSAF</h5>
</a>
</div>
<div id="collapseTwo" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
</ol>
</div>
<!--- KSAF10V --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseThree">
<h5>KSAF10V</h5>
</a>
</div>
<div id="collapseThree" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
</ol>
</div>
<!--- Makkah --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFour">
<h5>Makkah</h5>
</a>
</div>
<div id="collapseFour" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
</ol>
</div>
<!--- Marina --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFive">
<h5>Marina</h5>
</a>
</div>
<div id="collapseFive" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
</ol>
</div>
<!--- Residential --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSix">
<h5>Residential</h5>
</a>
</div>
<div id="collapseSix" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
</ol>
</div>
<!--- SAB4 --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSeven">
<h5>SAB4</h5>
</a>
</div>
<div id="collapseSeven" class="collapse">
<ol>
buttona type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
</h4>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse2" class="collapse in" aria-labelledby="heading2">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
</ol>
</div>
<!--- SFS --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
<h5>SFS</h5>
</a>
</div>
<div id="collapseOneInt" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
</h4>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse3">
<ol>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
<a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- iFrame --->
<div class="col-lg-7
col-md-7
col-sm-12
col-xs-12 pull-right
col-lg-pull-3 img-container
col-md-pull-3">
<iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
</div>
<script>
function setURL(url) {
document.getElementById('iframe').src = url;
}
</script>
</div>
</div>
Is there an more accurate way to do this than iframe?
and the thing I need help with mostly is:
When I reload the page, I want one of the buttons to be highlighted after the reload.
Like the class .active in bootstrap, when you first reload the page, the <li> is already highlighted without clicking it, thats what I want for the first button which is "A01-FAF-1". But the class active doesn't work.
How to do it?
Here is a very simple example:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
function showHer(){
$("#TestDiv").html("Something");
}
</script>
</head>
<body>
<div id="TestDiv" style="width:100px;height:100px;border:1px solid black">
Changeable stuff here.
</div>
<div onclick="showHer()" style="background:silver;border:1px solid black;cursor:pointer;display:inline;">
click me
</div>
</body>
</html>
You can see, in one line, I was able to change the content of a DIV elsewhere on the page.
Also note that there are no buttons. You can do this with a button, image, link, pretty much anything.
One other thing to note is that since you're using jquery to replace content in one small area of the page, the entire page doesn't need to update (faster) and hitting BACK doesn't just go back to the previous image, it would go back to the previous page.
How do you make a panel collapse when pressing a normal bootstrap button? Here's my code:
<div class="panel panel-primary" style="border-color: #464646;">
<div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
<div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Object Buttons-->
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
</div>
</div>
</div>
The panel-body will collapse when I click the panel-heading, but I would like to have the panel-body collapse when clicking one of the 'object' buttons.
You can apply the same data-target="#collapse1" to the button as the href has.
href
<a data-toggle="collapse" href="#collapse1">Select Object</a>
Button
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">
Also, your button isn't closed. missing > to close it.
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Select Object</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Select Object</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse2">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am facing an issue working with panel collapse where I have a to create dynamic data-target and id's for panel because I have list of items in ng-repeat but the problem is the collapsible panel is not in the scope of the triggering panel
Here is the html code:
<div class="row">
<div class="col-xs-4" ng-repeat="topics in oJdDetails.topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true"></span>
</a>
</div>
</div>
<div id="{{'collapse'+'_' + index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
<div class="input-group col-xs-6">
<input type="text" class="form-control" ng-model="search" ng-change="fnSearchQList(search)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" data-toggle="tooltip" data-placement="bottom" title="Search question " activetooltip aria-hidden="true"></span></span>
</div>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right" ng-click="fnshowInputQList()">
<div class="row">
<span class="col-xs-8">Add Question List</span><span class="glyphicon glyphicon-plus-sign col-xs-4" aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
Controller code is as below:
$scope.fngetQList = function(topics,index) {
$scope.index = index;
};
the array of topics is for example:["html","css","angular"]
I have no idea what I am doing wrong but when I click on 1st item the panel is getting opened with "collapse in " class but when I click on second item there still the "collapse in " class is getting appened which results in closing of the panel instead of opening the panel.
working example:
http://jsfiddle.net/Lvc0u55v/6625/
Any help would be appreciated.
i dont know if this is correct but it does what you want. i added the popup div inside the ng-repeat
<div ng-controller="MyCtrl">
<div class="row">
<div class="col-xs-4" ng-repeat="topics in topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true" />
<div id="{{'collapse'+'_' + $index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right">Click here</button>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Suppose I have the following code:
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button1</button>
<div id="collapse1" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button2</button>
<div id="collapse2" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
How can I collapse each individually?
http://plnkr.co/edit/W26X4Iq8KrnY9cGsFvwA?p=preview
Try this out:- http://plnkr.co/edit/vPbihuL6JBE6qhwy4irP?p=preview
HTML:-
<div ng-controller="AccordionDemoCtrl">
<accordion-group heading="Static Header">
<button class="btn btn-primary" ng-click="isCollapsed1= !isCollapsed1">Button1</button>
<hr>
<div id="collapse2" collapse="isCollapsed1">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed2 = !isCollapsed2">Button2</button>
<hr>
<div id="collapse2" collapse="isCollapsed2">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
</accordion-group>
</div>