I'm using bootstrap and scss to create a wordpress page but i'm having some issues trying to create a collapsable content. I have four buttons and I want that only the content of one of them is displayed while the others are collapsed. If I click the second button for example the buttons 1, 3 & 4 should display nothing.
Also I have a active class to show in a clear way which one is pressed that it's not working properly. Any help would be really nice, thanks!
var mainStarter = {
initialize: function() {
this.buttonActive();
this.toggleButton();
},
buttonActive: function() {
$(".btn.btn-bg-md").on("click", function() {
$(this).toggleClass('active');
});
},
toggleButton: function() {
$('.column button').click(function() {
$(".collapse:visible").add($(this).next()).slideToggle();
});
},
$(function() {
mainStarter.initialize();
});
.row {
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<!-- Item 1 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn1" aria-pressed="false" autocomplete="off">
<h6>Day 1</h6>
</button>
</div>
<!-- Item 2 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn2" aria-pressed="false" autocomplete="off">
<h6>Day 2</h6>
</button>
</div>
<!-- Item 3 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn3" aria-pressed="false" autocomplete="off">
<h6>Day 3</h6>
</button>
</div>
<!-- Item 4 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn4" aria-pressed="false" autocomplete="off">
<h6>Day 4</h6>
</button>
</div>
<div class="container">
<div class="collapse" id="btn1">
<h1>Something 1</h1>
</div>
</div>
<div class="container">
<div class="collapse" id="btn2">
<h1>Something 2</h1>
</div>
</div>
<div class="container">
<div class="collapse" id="btn3">
<h1>Something 3</h1>
</div>
</div>
<div class="container">
<div class="collapse" id="btn4">
<h1>Something 4</h1>
</div>
</div>
</div>
I am not really sure what you really want (your message is not that clear). What I understood, is that you want 2 buttons. When you click the first one, it shows the 1st message and hide the second. When you click the second, it shows the second message and hides the first one. If i understood correctly, you could use jquery, using the correct ids on the divs
$("#button1").click(function() {
if ($("#collapsebutton2").is(":visible")) {
$("#collapsebutton2").toggle( "slow", function() {
});
}
$("#collapsebutton1").toggle( "slow", function() {
});
});
$("#button2").click(function() {
$("#collapsebutton2").toggle( "slow", function() {
});
if ($("#collapsebutton2").is(":visible")) {
$("#collapsebutton1").toggle( "slow", function() {
});
}
});
Related
I am trying to add a search function to a bootstrap accordion that is used for FAQ.
So far, i can't get it to search properly.
JQuery
$(document).ready(function(){
$("#searcher").on("keypress click input", function () {
var val = $(this).val();
if(val.length) {
$(".accordion .card .collapsed").hide().filter(function () {
return $('.card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
}).show();
}
else {
$(".accordion .card .collapsed").show();
}
});
});
<div class="search-container">
<input class="input-medium search-query" id="searcher" placeholder="Search">
<button class="btn">Search</button>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active">
<div class="accordion" id="accordion1">
<div class="card">
<div class="card-header collapsed" id="genOne">
<a href="#collapseOne" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<p class="mb-0">
Where are you located?
</p>
</a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="genOne"
data-parent="#accordion1">
<div class="card-body">
<p style="text-align:center; font-size: 16px; ">We are located in , near the downtown area. To learn about local pick
up
options please contact us
at
<br /> support#
or
by phone 616
</p>
That is all of the code im using, if someone can point me in the right direction that would be awesome!
Thank you
I'm trying to toggle between plus and minus icon for bootstrap accordion. On default, plus icon is showing. When accordion collapses, it shows the minus icons and hides the plus icon. I don't know if what I'm saying makes sense but it's really basic for some of you. I'm just a beginner.
I've tried doing it with css with :after and content "+" and content "-" but this is not what I want. I need to use font awesome. I've also tried the js way.
<script>
$(document).ready(function(){
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend><?php echo $header_title; ?></legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus"></i>
Card Info
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I don't know how to check where I went wrong. All I want is to show the plus and minus icon
$(document).ready(function() {
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
/*$("#btnCollapse").on("click", function() {
$(".fa-plus").toggleClass("fa-minus");
})
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend>
<?php echo $header_title; ?>
</legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Card Info
<i class="fa fa-plus"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You can use alternate solution as follow:
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
Alex, your code is working fine. Please check this fiddle.
[https://jsfiddle.net/boilerplate/bootstrap][1]
Please make sure your js code must be written after the jquery.js and bootstrap.js loaded.
everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
I'm going mad here.
I have a search icon. If the user clicks on it, a dropdown is opened. If he/she clicks outside of the element, it closes the dropdown. My problem is that I want to close it if the user clicks again on the icon, but this part doesn't work. I guess the problem is the event.stopPropagation.
I have the following js code:
$('.mobile-search').on('click', function(event){
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
event.preventDefault();
event.stopPropagation() // stops bubbling
// hide search if user clicks outside of the search button
$('html').on('click.search', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('html').off('click.search');
searchField.hide();
} else if ($(ev.target).parents('.mobile-search').length) {
searchField.hide();
}
});
});
HTML code is:
<div class="col-md-4 col-sm-6 col-xs-12 active-app-title">
<h2 class="hidden-xs">OPPORTUNITIES</h2>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Create</div> </div>
<span>or</span>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Add new column</div></div>
<div class="mobile-search">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="mobile-views">
<a class="flaticon-pause45" href="#"></a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 search">
<div class="oe_searchview form-control input-sm active">
<div class="oe_searchview_search" title="Search Again">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="oe_searchview_facets">
<div class="oe_searchview_input" contenteditable="true" tabindex="0"></div>
</div>
<div class="oe_searchview_unfold_drawer" title="Advanced Search...">
<img src="/website/static/src/img/arrow-down.png" alt="Search Again" class="arrow-down-icon"/>
</div>
</div>
<div class="oe-search-options btn-group">
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filters</button>
</div>
<div class="btn-group btn-group-sm oe-groupby-menu">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Group By</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Favorites</button>
</div>
</div>
<div class="oe-right-toolbar">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<span class="flaticon-pause45"></span>
<span class="flaticon-list91"></span>
<span class="flaticon-statistical"></span>
<span class="flaticon-calendar160"></span>
</div>
</div>
</div>
I'm novice in js so every help would be appreciated.
This is how I would approach it
// one behaviour for the search button
// this checks to see if the search button is visible, and if so,
$('.mobile-search').on('click', function(event){
event.preventDefault();
event.stopPropagation() // stops bubbling
if($('.oe_searchview').is(":visible")){
// hide the search view
$('.oe_searchview').hide();
}
else
{
// show the search view
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
}
});
// this second behaviour happens only
// hide search if user clicks outside of the search button
$('html').on('click', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('.oe_searchview').hide();
}
});
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>