Fix behavior of collapse/expand blocks - javascript

I use bootstrap 4 alpha 6 version. I have several blocks in my page. I want expand/collapse these blocks by clicking main button (id='expand-collapse'). Also every button has there own individual buttons which would open/close concrete block. Right know I use next js code and have strange behavior.
For example: I open first block by clicking first button, then I click main button (id='expand-collapse') to open other blocks. But in fact first block closed and other blocks opened. How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">OPEN/CLOSE FIRST</a>
<div class="collapse block" id="block-1">
FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN/CLOSE SECOND</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN/CLOSE THIRD</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
$(target).each(function() {
if ($(this).hasClass('show')) {
$(this).collapse('hide');
} else {
$(this).collapse('show');
}
});
});
});

That kind of behaviour is due to data-toggle attribute. Take that off from the main button and change the script to this-
HTML
<button id='expand-collapse' type="button" data-parent="#blocks" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
JQUERY:
$(function() {
var showAll = false;
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
//console.log('showAll=' + showAll);
$(target).each(function() {
if(showAll === false) {
$(this).collapse('show');
}
else {
$(this).collapse('hide');
}
});
if(showAll === false) {
showAll = true;
}
else {
showAll = false;
}
//console.log('showAll=' + showAll);
});
});

Related

Is it possible to show a collapse saved in a different file, in the page requested?

Let's say I have a nav bar in my index with 4 button tag, right now they show the content in a different page, for example: button 1 sends me to page/button1page.php
What I want to do is, integrate those 4 pages in a single one, using collapse, I just don't know how, right now all I get is to show 4 different collapse but the code for every collapse is in the same file (my index), and I want it separately, for example, when I press button 1, I want to be able to display the content in a collapse inside the same page (index) instead of going to index/button1page.php
This is my test code, it works with all the code in the same file.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1"
aria-expanded="false" aria-controls="collapseExample" value="1" onclick="action(this.value)"
href="collapse1.html#collapse1">
Collapse 1 con button
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
aria-expanded="false" aria-controls="collapseExample" value="2" onclick="action(this.value)">
Collapse 2 con button
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3"
aria-expanded="false" aria-controls="collapseExample" value="3" onclick="action(this.value)">
Collapse 3 con button
</button>
<div class="collapse" id="collapse1">
<div class="card card-body">
Parrafo del collapse 1
</div>
</div>
<div class="collapse" id="collapse2">
<div class="card card-body">
Parrafo del collapse 2
</div>
</div>
<div class="collapse" id="collapse3">
<div class="card card-body">
Parrafo del collapse 3
</div>
</div>
<script>
function action(valor) {
if (valor == 1) {
document.getElementById("collapse1").style.display = "block";
document.getElementById("collapse2").style.display = "none";
document.getElementById("collapse3").style.display = "none";
}
else if (valor == 2) {
document.getElementById("collapse2").style.display = "block";
document.getElementById("collapse1").style.display = "none";
document.getElementById("collapse3").style.display = "none";
}
else if (valor == 3) {
document.getElementById("collapse3").style.display = "block";
document.getElementById("collapse1").style.display = "none";
document.getElementById("collapse2").style.display = "none";
}
}
</script>
your problem is not clearly stated, but from what I've understood, could this be what you want? example link

Trying to add a click event to individual elements but want them to execute one at a time

I have three div elements on a page and when each one is clicked they are supposed to disappear one at a time. Right now when I click one div element, they all disappear as a group. How do I make them disappear one at a time?
HTML
<div id=parentlist>
<div id="alert">
<span class="closebtn">×</span>
<strong>Error!</strong>
</div>
<div id="alert2">
<span class="closebtn">×</span>
<strong>Success!</strong>
</div>
<div id="alert3">
<span class="closebtn">×</span>
<strong>Warning!</strong>
</div>
</div>
JAVASCRIPT
document.addEventListener("click", function(){
document.getElementById('alert').style.display = 'none';
document.getElementById('alert2').style.display = 'none';
document.getElementById('alert3').style.display = 'none';
});
First create an Array and then add an event listener to every element in the array using Array.forEach method of ES6.
The Code:
window.onload = function() {
var divs = Array.from(document.querySelectorAll('.alerts'));
divs.forEach(div => div.addEventListener('click', function() {
div.style.display = 'none';
}));
}
<div id=parentlist>
<div id="alert" class='alerts'>
<span class="closebtn">×</span>
<strong>Error!</strong>
</div>
<div id="alert2" class='alerts'>
<span class="closebtn">×</span>
<strong>Success!</strong>
</div>
<div id="alert3" class='alerts'>
<span class="closebtn">×</span>
<strong>Warning!</strong>
</div>
</div>
You can try using timeout like this
document.addEventListener("click", function() {
document.getElementById('alert').style.display = 'none';
setTimeout(() => {
document.getElementById('alert2').style.display = 'none';
setTimeout(() => {
document.getElementById('alert3').style.display = 'none';
}, 500);
}, 500);
});
<div id=parentlist>
<div id="alert">
<span class="closebtn">×</span>
<strong>Error!</strong>
</div>
<div id="alert2">
<span class="closebtn">×</span>
<strong>Success!</strong>
</div>
<div id="alert3">
<span class="closebtn">×</span>
<strong>Warning!</strong>
</div>
</div>

Moving DIV disable button 0px left-margin

I have a little problem. Im trying to create my own slider using jQuery and some css/javascript.
I got my slider to work moving a Div 660px to the left and right by clicking a button.
But, I would like to have the right button disabled when the left margin is 0. And I would like the whole div to rewind back to 0px after some clicks.
Is this possible?
Here is my code:
<script language="javascript">
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
}
</script>
<div class="container">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide">
<?php get_template_part('loop-reviews');?>
</div>
</div>
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
The code im using is from this page: Page
Well, with the code from Rayn i got the button to hide, but now it won't show when left-margin is 1px or something. So I'm trying this now: (doesn't work btw)
Im trying this now: (doesn't work btw)`function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
} else (slidemarginleft == '1px') {
$('.contr-right').show();
}
}`
Also I'm seeing that the margin-left isn't set in the style sheet but in the
<div style="margin-left:0px">content</div>
You can do an if statement after each click to check if the element has 0px
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
}
}
Use this
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
if($('.xman').css("marginLeft")=='0px'){
$('.contr-left').attr('disabled',true);
}
}
Disable Button when margin-left: 0px
You can use jquery's .prop() method to disable a button if a condition is met. Here is an example (in pseudo code):
function disableButton() {
$(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
disableButton()
}
}
checkMargin()
Rewind to 0px after some clicks
Here, I'd just set a count for clicks and trigger a function when it meets the threshold you want. Pseudo code:
var threshold = 5
var clicks = 0
$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})
function rewind() {
$(element).css( "margin", "0" );
checkMargin()
}
Here is my working code, thanks for all the help:
<script>
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft < '-3000px'){
$('#slide').animate({marginLeft: '0px'}, 400);
}
var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hide >= '-50px'){
$('.contr-left').addClass('showMe');
}
var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hideMe <= '-50px'){
$('.contr-left').removeClass('showMe');
}
}
</script>
<!-- /Review script -->
<section id="reviews">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<h4>Reviews</h4>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide" style="margin-left:0px;">
<?php get_template_part('loop-reviews');?>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
<div class="btn btn-06">Bekijk alle reviews</div>
</div>
</section>

Bootstrap: next button should display next tab

I want to implement a custom next button into the bootstrap tab navigation.
When clicking on the next-button, the next tab should be displayed as active.
If the last tab is reached it should start with the first tab.
Bootply snippet
This solve your problem
$('.next-tab').click(function(e){
if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
$('.nav-tabs > li').first('li').find('a').trigger('click');
}else{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
e.preventDefault();
});
http://www.bootply.com/XYpxMIgink
I Recently needed this functionality and this is what I ended up with:
$('.change-tab').click(function() {
var $this = $(this);
var $nav = $($this.data('target'))
var $tabs = $nav.find('li');
var $curTab = $tabs.filter('.active');
var cur = $tabs.index($curTab);
if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a');
else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a');
$showTab.tab('show');
});
// normal tabs code
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$(function () {
$('#myTab a:last').tab('show');
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home
</li>
<li>Profile
</li>
<li>Messages
</li>
<li>Settings
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home content...</div>
<div class="tab-pane" id="profile">Content here...</div>
<div class="tab-pane" id="messages">Messages...</div>
<div class="tab-pane" id="settings">Settings...</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
<button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
I am using #DelightedD0D provided solution. When the page load, the control stop on the last tab always. If you want to fix this, please update the following function
$(function () {
$('#myTab a:last').tab('show');
})
to
$(function () {
$('#myTab a:active').tab('show');
})

Ng-click need double click why

I have a little problem : ng-click working if only i do a double-click oO i don't understand, what is wrong ?
This is my controller
function MapCtrl($scope) {
if(navigator.onLine){
$scope.online = true;
} else {
$scope.offline = true;
}
/* text */
$scope.reloadText = "Reload";
$scope.reloadingText = "Reload in progress";
$scope.offlineText = "not online";
$scope.reloadMap = function() {
$scope.reload = true;
$scope.online = false;
$scope.offline = false;
}
}
and my html :
<section class="myPanel panel-padding" ng-controller="MapCtrl">
<div id="myMap">
<div class="alert alert-danger" ng-show="offline">{{offlineText}}</div>
<p ng-show="reload"><i class="fa fa-refresh fa-spin"></i> <span>{{reloadingText}}</span></p>
<div id="map" ng-show="online"></div>
<div id="mapControls">
<ul>
<li ng-hide="reload">
<button type="button" ng-click="reloadMap()" class="btn btn-primary btn-xs">{{reloadText}}</button>
</li>
</ul>
</div>
</div>
</section>
i don't understand why i need to double-click, i want it back to normal :/
reloadMap sets reload to true und your <li> has ng-hide="reload" meaning it is hidden when reload is true. So when you lick once the button should vanish. Clicking a second time or making a doubleclick makes the button visible again.

Categories