I have 4 divs that each have a button , when a button on div is clicked it should hide that div. Then there is button at top called show all which will show all hidden divs again below is all the code show button , JS script and the four div boxes which should hide when button clicked on them and show all boxes again when show button is clicked
<button type="button" class="btn btn-light btn-sm mt-3" id="show"><i class="fe fe-eye"></i> Show all</button>
<script type = "text/javascript" >
function show(elementId) {
document.getElementById("id1").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById("id3").style.display = "none";
document.getElementById("id4").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<div class="card project-card" id="id1">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id2">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id3">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id4">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
Simply set div's display to either block or none to hide it.
let show = document.getElementById('show-button');
let divs = document.getElementsByName('container');
let hideButtons = document.getElementsByName('hide-button');
show.onclick = () => {
divs.forEach((d) => d.style.display='block');
}
hideButtons.forEach((b) => {
b.style.display='block';
b.onclick = () => b.parentNode.style.display='none';
});
<button id='show-button'>Show</button>
<div name='container'>
<button name='hide-button'>Hide 1</button>
</div>
<div name=container>
<button name='hide-button'>Hide 2</button>
</div>
<div name=container>
<button name='hide-button'>Hide 3</button>
</div>
<div name=container>
<button name='hide-button'>Hide 4</button>
</div>
Related
function openclass(className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(className).style.display = "block";
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass('viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass('addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass('addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass('assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
With first button already active, I want to make every other button active on click and and remove older active, I know it can be done through js but really can't seem to figure it out
You just need to add the clickedbutton inside the onclick arguments. You can do that by using the this keyword. So onclick=openClass(this, 'className')
And then, on click, remove all the ' active classes ' and add the active class to the clickedButton
function openclass(clickedBtn, className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(`${className}`).style.display = "block";
// add remove active class
document.querySelectorAll('.btn').forEach(btn => btn.classList.contains('active') && btn.classList.remove('active'))
clickedBtn.classList.add('active')
}
.btn.active {
background:Red;
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass(this,'viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass(this, 'addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
I need to have multiples divs on a page, each one one with 3 buttons that hide and show content inside of each div. The objective is exactly the same in both divs but what is happening is that when i press a button on the first div it also triggers the action on the other divs. How can i fix this? My idea is to have, for example, a unique id per div that allows me to use the same buttons across the page multiples times without having to repeat the JS code.
This is my initial code, and i want to be able to add something that i can use the buttons but only triggers inside the div their in.
Hope someone can point me in the right direction.
$('.descontoBTN').on('click', function () {
$(".pacote div").hide()
$(".desconto").show()
$('.descontoBTN').addClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').removeClass('active')
});
$('.mensalidadeBTN').on('click', function () {
$(".pacote div").hide()
$(".mensalidade").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').addClass('active')
$('.tvBTN').removeClass('active')
});
$('.tvBTN').on('click', function () {
$(".pacote div").hide()
$(".tv").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').addClass('active')
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You can reduce the amount of repeated code by creating an eventHandler to handle all button clicks.
Updated
I have adjusted the demo to use the HTML added to the question. I am not sure if I have capture all your requirements but the amount of code duplication has been reduced.
See demo below
$('.ofertas button').on('click', function() {
// find closest parent 'group'
let columnGroupElementId = $(this).closest('div.col-12').attr('id');
let elementIdSelector = '#' + columnGroupElementId
// hide all .pacote divs within it
$(elementIdSelector).find(".pacote div").hide();
// remove class from all buttons in it
// the line below may or may not be needed, I am not sure of your requirements
$(this).closest(".ofertas").find('button').removeClass('active');
$(this).addClass('active');
// get a list of classes for selected button
var classList = $(this).attr('class').split(/\s+/);
var classNameToShow = '';
// get the value of the class name that ends with BTN and use it as the class name to show
$.each(classList, function(index, item) {
var indexOfBtn = item.indexOf('BTN');
if (indexOfBtn >= 0) {
classNameToShow = item.substring(0, indexOfBtn);
//console.log('-'+classNameToShow+'-');
}
});
// show only the child of the selected one
$(elementIdSelector).find("div." + classNameToShow).show();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN" data-value="desconto">
Desconto €3/mês
</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN" data-value="mensalidade">
1 Mensalidade
</button>
<button type="button" class="btn btn-dark w-100 tvBTN" data-value="tv">
TV 32"
</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You need to leverage $(this). This is just a basic example of usage:
$('.myButtonClass').on('click', function(){
$('.myButtonClass').not(this).hide()
$(this).parent().find('.otherTargetedClass').addClass('active')
$(this).siblings().fadeOut('slow')
$(this).parent().show()
})
Also, it looks like you are using the id attribute the same as the class attribute. Id's are unique and there should never be duplicates of the same id on a page. Classes can be used multiple times on a page.
I have a scenario like this:
Display Ngb Bootstrap carousel and control the slide images by two buttons: Previous and Next.
When Previous button was clicked then show previous slide image and Next button was clicked then show next slide image.
Unfortunately, my code doesn't work. Someone can help me. Below are my code:
HTML code:
<div class="wrapper-md">
<div class="modal-header">
<h5 class="modal-title">TITLE HERE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel #carousel *ngIf="images" [showNavigationArrows]="false" [showNavigationIndicators]="false" [keyboard]="false">
<ng-template ngbSlide *ngFor="let image of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Guide image">
</div>
<div class="carousel-caption">
<h4>Slide {{i}}</h4>
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
<button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
<button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
</div>
</div>
TypeScript code:
images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/900/500`);
#ViewChild('carousel', {static: true}) carousel: NgbCarousel;
isPrevious: boolean = false;
isNext: boolean = false;
constructor(public modal: NgbActiveModal){
}
skip()
{
this.modal.close();
}
previousStep()
{
this.isPrevious = true;
this.carousel.prev();
}
nextStep()
{
this.isNext = true;
this.carousel.next();
}
Any idea in my case.
Thank in advance!
Remove [showNavigationArrows]="false" this attribute
explain---if youuse ngb-carousal this attribue is false then your next and pre event is not work by default it is true
and inside ngb-carouse you can use next and pre button
<div class="wrapper-md">
<div class="modal-header">
<h5 class="modal-title">TITLE HERE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel #carousel *ngIf="images" [showNavigationIndicators]="false" [keyboard]="false">
<ng-template ngbSlide *ngFor="let image of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Guide image">
</div>
<div class="carousel-caption">
<h4>Slide {{i}}</h4>
</div>
</ng-template>
<div class="row justify-content-center">
<button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
<button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
<button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
</div>
</div>
</ngb-carousel>`
</div>
I'm trying to get several buttons to vertically stretch to the size of the container, but I can't figure out how I did it before. I've tried all of the possibilities on https://getbootstrap.com/docs/4.0/utilities/flex/ (like align-items-stretch, align-self-stretch, align-content-stretch, but none seem to do anything for single column vertical stretching, at least how I implemented them. How is it done? Thanks!
(https://codepen.io/jasonws/pen/poyYMpz)
<div class="container mt-3">
<div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
<button type="button" class="btn btn-primary my-1">Flex item 1</button>
<button type="button" class="btn btn-primary my-1">Flex item 2</button>
<button type="button" class="btn btn-primary my-1">Flex item 3</button>
</div>
</div>
Just remove the other things from your d-flex class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="border" style="display: grid">
<button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
</div>
</div>
I'm trying to create four buttons where four labels appear in a random order:
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
The labels are stored under the
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
Then the code iterates through the choices to stick them in the buttons:
for (var i=0; i<choiceLabels; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
But the text does not appear on the buttons - they stay empty.
Anybody know why?
Your error is here: i<choiceLabels. choiceLabels is an array, so you have to do i<choiceLabels.length.
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
You are missing the length value in choiceLabels. The iteration should loop through choiceLabels.length:
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>