I have numerous buttons on a page. Each is related to its own separate div on the page. When button 1 is clicked div 1 is shown. When button 2 is clicked div 2 is shown and so on.
What's the best way to write the following jQuery below, so I don't have to keep writing a new function for every new button and new div that will need to be added?
$("#bio-1").click(function () {
$('.one').toggle();
});
$("#bio-2").click(function () {
$('.two').toggle();
});
$("#bio-3").click(function () {
$('.three').toggle();
});
$("#bio-4").click(function () {
$('.four').toggle();
});
You can try using data-* attribute which on clicking you can use to find only the specific element to toggle.
Demo:
$("[id^=bio-").click(function () {
$(`div[data-id=${this.id}]`).toggle();
});
div{
width: 100%;
border: 1px solid lightgray;
margin: 5px;
padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1">Button-1</button>
<button id="bio-2">Button-2</button>
<button id="bio-3">Button-3</button>
<button id="bio-4">Button-4</button>
<div class="one" data-id="bio-1">One</div>
<div class="two" data-id="bio-2">Two</div>
<div class="three" data-id="bio-3">Three</div>
<div class="four" data-id="bio-4">Four</div>
It depends on how you initialize your display... hidden or all visible divs. This is like a toggle based on a common identifier that would let you keep your actual HTML code and shorten and organize your javascript code.
To use a toggle function, you should initialize your styles following the expected visibility logic.
$('div[data-id!=""]').hide();
$("[id^=bio-]").on("click", function () {
$('div[data-id!=""]').hide();
$('div[data-id="'+$(this).data('id')+'"]').show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1" data-id="1">One</button>
<button id="bio-2" data-id="2">Two</button>
<button id="bio-3" data-id="3">Three</button>
<button id="bio-4" data-id="4">Four</button>
<div class="one" data-id="1">One</div>
<div class="two" data-id="2">Two</div>
<div class="three" data-id="3">Three</div>
<div class="four" data-id="4">Four</div>
Demo
you have to used toggle as well as show jquery function.
$(".clickBUtton").click(function () {
var id = this.id; // click class id
$("#DIV"+id).show(); // toggle and you also add show
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="clickBUtton" id="one">ONE</button>
<button class="clickBUtton" id="two">TWO</button>
<div id="DIVone" style="display:none;">one div</div>
<div id="DIVtwo" style="display:none;">two div</div>
Related
<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am making a website and I need a bit of assistance with toggling div being shown and not shown with
<span> and <button> the thing I am toggling is a div section with search and items underneath it, and it just shows the boxes with the content and I want the users to be able to toggle the visibility. Here's what I have tried:
<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am just stuck on how to toggle the content being displayed.
<div class="warnAA1">
<button onclick="showContent()">×</button></span>
<button onclick="removeContent()"> - </button></span>
<div class = "content">
Here is div content
</div>
</div>
<script>
const warnDiv = document.querySelector('.warnAA1');
const warnDivContent = warnDiv.querySelector('.content');
function showContent(){
warnDivContent.style.display = 'none';
}
function removeContent() {
warnDivContent.style.removeProperty('display');
}
</script>
You can use the slideToggle() method in jQuery to achieve your requirement easily.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle();
});
});
</script>
</head>
<body>
<div>This is a paragraph.</div><br><br>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
There are a couple of ways you can do this: I'd highly recommend you use ids to not have to worry about relative position querying multiple elements etc. I've also added a toggle button to show how that can work.
var show = document.getElementById("show");
var hide = document.getElementById("hide");
var warn = document.getElementById("warn");
var toggle = document.getElementById("toggle");
show.addEventListener("click", function() {
warn.classList.remove("hide");
});
hide.addEventListener("click", function() {
warn.classList.add("hide");
});
// Toggle logic
toggle.addEventListener("click", function() {
warn.classList.toggle("hide");
});
.warnAA1 {
background-color: #aaaaaa;
min-height: 200px;
transition: opacity .5s ease-in-out;
}
.warnAA1.hide {
opacity: 0;
}
.abs {
position: absolute;
top: 10px;
left: 10px;
}
<div id="warn" class="warnAA1">
</div>
<div class="abs">
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="toggle">Toggle</button>
</div>
As you have both your buttons inside the content you are trying to hide both the buttons hide along with the parent please try the following code snippet and let me know if it works. Placing the buttons outside should fix it.
function Hide(){
document.getElementsByClassName('warnAA1')[0].style.display = 'none';
}
function Show(){
document.getElementsByClassName('warnAA1')[0].style.display = 'block';
}
<span onClick="Hide()"><button>×</button></span>
<span onClick="Show()"><button> - </button></span>
<div class="warnAA1">
MY content
</div>
I'm looking to replicate the decision flow found here: https://codepen.io/jason-monaghan/pen/bGbQVwM
I'd like there to be two buttons, When one is clicked, a section expands with two more buttons. some sections will have text instead of buttons.
I've attached a user flow I created.
User flow
I tried to use toggle buttons but found an issue when both buttons were clicked:
$(document).ready(function() {
$('.button').click(function() {
$(this).siblings(".item").toggle();
});
});
$(document).ready(function() {
$('.button-1').click(function() {
$(this).siblings(".item-1").toggle();
});
});
.item,
.item-1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="button">Yes</button>
<button class="button-1">No</button>
<div class="item-1">
Not eligible
</div>
<div class="item">
<div class="item-2">
<p>Eligible</p>
<button class="button-3">Click</button> <button class="button-4">Click</button>
</div>
</div>
</div>
Thanks
You are not toggling the previously selected item. You should do something like:
$(this).siblings(".item-1").hide();
$(this).siblings(".item").show();
when you click a single button. Or disable the other button so that it cannot be clicked.
I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I am currently developing a simple webpage for a school assignment and I was wondering it is possible to create a button that will add a button, also a button beside it to remove the button?
Basically a button called "Add Button" where if you click on it, a button with the same size(can be named anything appropriate with no functions required). no matter how many times I click it, more buttons will be added e.g. button1, button2, button3 etc. Also, next to "Add Button" button is a button called "Remove Button" where it removes the buttons desendingly e.g. from button3, button2, then button1
How about something like this? Change the increment slightly.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
button{
height:100px;
width: 80px;
text-align: center;
margin: 5px 4px;
}
#mainButtons button{
display: inline-block;
margin: auto;
}
</style>
<div id="mainButtons">
<button onclick="addButton()">Make Button</button>
<button onclick="removeButton()">Remove Button</button>
</div>
</br>
<div id="que"></div>
<script>
var increment = 0;
function addButton(){
$("#que").append($("<button id='btn"+(increment++)+"'>This is Button"+ (increment)+"</button>"));
}
function removeButton(){
$("#btn"+(increment-1)).remove();
increment--;
}
</script>
You can use append() jquery function.
This is example :
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn" id="add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
<div class="result">
</div>
Jquery :
var start = 0;
$(document).on("click","#add_button",function(){
start++;
$(".result").append($('<button id="add_button">Add'+start+'</button>').addClass('button'+start));
});
$(document).on("click","#delete_button",function(){
start--;
$(".result").find('#add_button').each(function(index, el) {
$('.button'+start).remove();
});;
});
Js fiddle : https://jsfiddle.net/p8y672oL/
Must they be numbered? If not you can append the buttons and use jQuery's last() and remove() functions without the need of an increment/decrement variable.
<div class="button-test">
<button type="button" id="add-button">Add Button</button>
<button type="button" id="remove-button">Remove Last Button</button>
<div id="new-buttons"></div>
</div>
<script>
$('#add-button').on('click', function () {
$('#new-buttons').append($('<button>', {
'type': 'button',
'class': 'temp',
'text': 'new button'
}));
});
$('#remove-button').on('click', function () {
$('#new-buttons button.temp').last().remove();
});
</script>
Now am using fade in fadeout to toggle the content on button click.
the script i used for the same is
function showHide(divId){
if (document.getElementById(divID).style.display == "none") {
$('#'+divID).fadeIn(3000);
} else {
$('#'+divID).fadeOut(3000);
}
}
how to modify the above code to show content on button click.
consider i have 2 buttons
<button> button1</button>
<button> button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>
i wanna show either of the div, when button1 is clicked, button 2 content shouldn't be visible and vice verse.
Update showHide
function showHide(divID) {
$("div").not("#" + divID).fadeOut(3000);
Choosing to fade them out every time is fine since hiding a div would not show another. You should probably also give all of these divs a class and use that instead of just "div"
You can use the onclick event on button.
<button id="button1" onclick="ShowHideDiv(this);">button1</button>
<button id="button2" onclick="ShowHideDiv(this);">button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>
In the script tag, this function can be used.
function ShowHide(element)
{
if ($(element).attr("id") == "button1")
{
$("#div1").fadeIn(3000);
$("#div2").fadeOut(3000);
}
else if ($(element).attr("id") == "button2")
{
$("#div2").fadeIn(3000);
$("#div1").fadeOut(3000);
}
}
If you want to hide all the divs except one, you can use code similar to the following:
$("div").fadeOut(3000);
This will hide all the divs.
Then this will show the proper div:
$("#divId").fadeIn(3000);
Use proper Id of div in divId
I'm a beginner at js, but try this:
HTML:
<button id="btn1"> button1</button>
<button id="btn2"> button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" class="hidden"> content of button 2</div>
CSS:
.hidden { display: none;}
JS:
$('#btn1').click(function(){
$('#div2').addClass('hidden');
$('#div1').removeClass('hidden');
})
$('#btn2').click(function(){
$('#div1').addClass('hidden');
$('#div2').removeClass('hidden');
})
Here's a demo.
Please change your HTML into this :
<button id="btn1" onclick="ShowHideDiv(this);"> button1</button>
<button id="btn2" onclick="ShowHideDiv(this);"> button</button>
<div id="div1" class='divShowHide'> content of button 1 </div>
<div id="div2" class='divShowHide'> content of button 2</div>
now try this code :
firstCall this function on domready:
$(document).on('click',function(){
$('.divShowHide').fadeOut(30);
});
function ShowHideDiv(divId){
$('.divShowHide').fadeOut(3000);
$(divId).fadeIn(3000);
}