I have three buttons and each triggers showing a corresponding panel. I would like to only show one panel at a time, but right now a panel is shown per button clicked. So clicking all three buttons shows three panels at the same time.
I am using twitter bootstrap, and this is my code:
<span data-toggle="buttons-radio">
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content1"><i class="icon-sitemap"></i> Content1</a>
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content2"><i class="icon-user"></i> Content2</a>
<a class="btn btn-sm btn-primary pull-right m-r" data-toggle="class:show" href="#content3"><i class="icon-male"></i><i class="icon-female"></i> Content3</a>
</span>
<aside class="bg-white hide col-lg-6 b-l" id="content1">
<div>
<h2>This is content 1</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content2">
<div>
<h2>This is content 2</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content3">
<div>
<h2>This is content 3</h2>
</div>
</aside>
thanks
Thomas
In bootstrap, tabs work that way:
http://getbootstrap.com/javascript/#tabs
The tabs titles show up across the top and clicking them shows different content. Two tabs are never shown at once.
Try wrapping it in a .btn-group to your span.
<span class="btn-group">
//your buttons
</span>
Related
This is a screenshot of a normal google search
I'm trying to get the tiny message box when you go to the mic icon on Google search engine. I want to incorporate that to my bootstrap buttons. Following is the code where i want to add a similar message box on Connect and Disconnect button.
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6">
<br>
<img style="width:30%" src="icon1.jpg">
<br>
<br>
<button type="button" class="btn btn-success" >
<a style="color:white;" href= "options.html" >
Connect
</a>
</button>
</div>
<div class = "col-12 col-sm-6 col-md-6 ">
<br>
<img style="width:30%" class="float-right" src="icon1.jpg" >
<br>
<br>
<br>
<br>
<br>
<div class ="text-right">
<button type="button" class="btn btn-danger ">
<a style="color:white;" href= "options.html" >
Disconnect
</a>
</button>
</div>
</div>
</div>
</div>
What you're looking for are tooltips. Check out bootstrap's documentation about them here.
You can follow this code with bootstrap. use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer. For more follow the link https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Hover over me
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I'm using an accordion panel for long comments in my blog. Now I want to add long text to short text and show the full text with this, but I have a problem. If I click the show button, it shows at a newline.
jsfiddle snippet
<div class="panel-group" id="accordion">
<div class="panel panel-default text-left" >
<div>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack...</div>
</div>
</div>
<div class="panel" >
<div id="collapse2" class="clearfix panel-collapse collapse">
<div class="panel-body" style="color:#000;">overflow post and i hope i can find a good solution for this
</div>
</div>
<div class="panel-heading">'.
<h5><a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Show/Hide</a>
</h5>
</div>
</div>
</div>
I want to add another part to short text without newline.
Add the second part of your text in a span and hide it, then reveal it with JS:
function showMore()
{
if ($('#threedots').css('display')=='none')
{
//already showing, we hide
$('#threedots').show();
$('#full_desc').hide();
}
else
{
//show more
$('#threedots').hide();
$('#full_desc').show();
}
}//end function
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack<span id="threedots">...</span><span id="full_desc" style="display:none">overflow post and i hope i can find a good solution for this</span></div>
<a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" onclick="showMore()">Show/Hide</a>
In the lack of my javascript-skills I need some help for my very basic bootstrap problem.
That's the goal: four hidden paragraphs via collapse and a "toggle" button for each to make it visible or hidden.
That's the problem: the first collapse works fine, but the second, third and fourth glyphicon inside the buttons is changing too. And if I want to view the second, third and fourth collapsed paragraph after clicking the appropriate button it only shows the first paragraph. What happen? Is there only the one way to make this works, to include different IDs for each paragraph in the Javascript?
Live on Bootply: http://www.bootply.com/Jyf06v1aiK
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the THIRD collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-success">
<div class="collapse" id="collapseDiv">
<p class="">This is the FOURTH collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
Javascript:
$('#collapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#collapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
Take a look at my changes on your code here.
Your issue is not actually related to JS, but to concepts around the DOM.
First of all, it isn't a good idea to have the same id in multiple elements, the id attribute is supposed to be unique across the entire DOM.
Second, $('.glyphicon') refers to ALL the elements in the DOM with a class glyphicon not only the closest to your collapse div.
I'm including the code here but feel free to try it in the link above.
<div class="container">
<h1 class="">Bootstrap Collapse Buttons (WIP)</h1>
<div class="col-xs-6 bg-warning">
<div class="collapse customCollapse" id="collapseDiv">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-info">
<div class="collapse customCollapse" id="collapseDiv2">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv2" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-danger">
<div class="collapse customCollapse" id="collapseDiv3">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv3" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-success">
<div class="collapse customCollapse" id="collapseDiv4">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv4" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
</div>
And the js
$('.customCollapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('.customCollapse').on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
EDIT
A little extra explanation: if you plan to share js logic across multiple DOM elements a good way to do it is using classes. That is why I changed your js and DOM to use .customCollapse instead of the collapseDiv id.
Note also that I changed the ids on each collapseDiv by adding a number to make it unique.
I have this template that initially shows:
Sidebar1 - Content - Sidebar2
But when the user is in mobile view, I need to disappear the two sidebars and that this can be opened by a button, one at a time...
Button1 - opens sidebar1 to the right.
Button2 - opens sidebar2 to the left.
Anyone know if this is possible or has it done?
Code
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-6">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
Filters <i class="fa fa-arrow-right"></i>
</button>
</p>
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
<i class="fa fa-arrow-left"></i>
Details</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div><!--/span-->
<div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
</div>
Javascript
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
Let's give this a try... I added a new row at the bottom of your current HTML to represent the same exact links that are displayed on the edges but are hidden until a button is toggled. Let's take a look at the HTML first:
HTML
<div class="row">
<div class="col-xs-3 col-sm-3 sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
<div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
</div>
As you can see, I copy and pasted the exact same HTML and added the following classes: hide, trial, trial2
Class hide: This is a built in BootStrap class that hides all content within the specified tag. I toggle this class with jQuery later on.
Class trial/trial2 : This is just a random name I chose to make sure the toggle effect was going to work, you can virtually name it whatever you want, but just make sure you reference the tag.
Let's look at the new jQuery:
jQuery
$('[data-toggle=offcanvas]').click(function () {
$('.trial2').toggleClass('hide');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.trial').toggleClass('hide');
});
It's virtually the same code you had but I have it now toggling the hidden content.
Conclusion:
I added a few other things as well - such as the ability to hide the two side-navigation bars as the screen shrinks to a smaller size. Just take a look at the code I will provide via a JSFiddle and you will understand it a bit better.
DEMO JSFiddle
I fixed like this:
HTML
<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">
<div id="filters"></div>
<div id="content">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav nav-pills">
<li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
<li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
</ul>
</div>
</nav>
</div>
<div id="detail"></div>
</div>
JAVASCRIPT
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas-left').toggleClass('active');
});
$('[data-toggle=offcanvasa]').click(function() {
$('.row-offcanvas-right').toggleClass('active');
});
I want to use a radio button group together with collapse functionality in my bootstrapped website. I want to have 3 buttons and only one button / div active at any given time. I got it to work partly, but not completely.
When I select the first radio button it shows me the first div correctly. If I move to the 2nd div it works great too. If I move back to the 1st div that also shows. But then - if I move to the 3rd button it shows the 3rd div, but if I then go back to the 1st button the 1st div does not show anymore. From that point on I can only show div2 and div3.
Here's what I did.
I created the radio button group as follows:
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary btn-large" onclick="showdiv(1);">Save as PDF</button>
<button class="btn btn-primary btn-large" onclick="showdiv(2);">Simple API</button>
<button class="btn btn-primary btn-large" onclick="showdiv(3);">Advanced API</button>
</div>
Then I created three divs as below:
<div id="div1" class="row pricing collapse">
.....
</div>
<div id="div2" class="row pricing collapse">
.....
</div>
<div id="div3" class="row pricing collapse">
.....
</div>
The javascript that I created to show a given div is as follows:
function showdivold(divnr) {
for (var i=1;i<=3;i++)
{
if (i==divnr)
{
$('#div'+i).collapse('show');
}
else
{
$('#div'+i).collapse('hide');
}
}
}
Any help would be greatly appreciated. I use jquery1.8.3 and bootstrap js.
Another problem is that I can't seem to get the default state of the 1st radio button to be set to 'pressed'.
How about this? Is this what you are after? I used Bootstrap 2.3.1 and JQuery 1.9.1. Hope latest versions are not issues for you.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="btn-group nav nav-tabs" data-toggle="buttons-radio">
<button class="btn btn-large" href="#div1" data-toggle="tab">Save as PDF</button>
<button class="btn btn-large" href="#div2" data-toggle="tab">Simple API</button>
<button class="btn btn-large" href="#div3" data-toggle="tab">Advanced API</button>
</div>
<div class="tab-content">
<div id="div1" class="tab-pane active">
<p>div #1</p>
</div>
<div id="div2" class="tab-pane">
<p>div #2</p>
</div>
<div id="div3" class="tab-pane">
<p>div #3</p>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>