Develop Reference

How to write a multiple click function that targets different divs?

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>

How to display and hide 2 div with jquery using if statement?

I have a simple 2 div with contents and 2 buttons:
<div id="div1"></div>
<div id="div2"></div>
<i class="button1"></i>
<i class="button2"></i>
$(".button1").click(function() {
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
});
$(".button2").click(function() {
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
});
What i want to achieve is that if div1 is already on and if i press button2, div1 needs to go Off, div2 needs to go On and button1 needs to remove class .active and button2 needs to get class .active and vice versa!
It is very important that the display/hide is done with fadeIn/Out animation!
Both divs should be Off by default!

Maybe you would like something like this. I'm checking to see if the div is visible. If so, then I toggle the fade and active class. Hopefully this helps.
$(".button1").click(function() {
if($("#div2").is(':visible')){
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
}
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
});
$(".button2").click(function() {
if($("#div1").is(':visible')){
$("#div1").fadeToggle();
$(".button1").toggleClass("active");
}
$("#div2").fadeToggle();
$(".button2").toggleClass("active");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="display:none">Div 1 Stuff</div>
<div id="div2" style="display:none">Div 2 Stuff</div><br/>
<i class="button1">Icon1</i>
<i class="button2">Icon2</i>

Showing a div on button click

I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}

You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});

Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});

Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.

While adding a div content into another div on click of a button

Here is my code --
<div id="div1">
this is div 1
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
<div id="div2">
this is div 2
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn2 -->
</form>
</div>
<div id="showtheaddedform">
//here my form will be push on click to button
</div>
<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>
// the click function in my js file are as -
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
$("#showtheaddedform").append($("#div2").html());
});
now the problem is --
On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like
<div id="showtheaddedform">
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
but when I'm clicking #btn2 it's adding only the element inside the form , like
<div id="showtheaddedform">
<!-- this form to be add on click #btn2 -->
</div>
[ NOTE : I've not written any kind of remove query ]
..any idea , how it's removing !!!

Both your buttons have the same id. Also there is a syntax mistake in
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
}
add
); to it
DEMO
Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work
EDIT
Updated Fiddle

Your second button appears to have the wrong ID.
<button type="button" id="btn1">Add the form2</button>
Change to
<button type="button" id="btn2">Add the form2</button>

Try Below code in java script tag and also change your button id to btn1 and btn2
$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div1").html());
});
$("#btn2").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div2").html());
});
});

How to use Javascript or Jquery to toggle the visibility of a html div

I'm creating a basic site and I've got the following script that hides a div:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Show/Hide Description
<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>
When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?
I want the user to manually click the button to view the text.
EDIT:
I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:
<h4>Backstory</h4>
<img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>
<div id="backstory" style="display: none">
<br>
<p>This is a new block of text</p>
</div>
The ./images/headerExpand.png is the icon of the + symbol
How would I change the + icon to a - icon once the + icon has been clicked?
Thanks.

set the display to none
<div id="description" style="display: none">
A redesigned solution might look like
<!-- Add a class toggler and the id of the target element as the href-->
Show/Hide Description
<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
<br/>
<br/>
<p>This is a test paragraph</p>
</div>
CSS
.hidden {
display: none;
}
then jQuery script
// dom ready handler
jQuery(function () {
//register a click handelr for all anchor elements with class toggler
$('a.toggler').click(function (e) {
//prevent the default action of the event
e.preventDefault();
//togger the visibility of the element targetted by the href
$($(this).attr('href')).toggle()
});
})
Demo: Fiddle

use symply CSS :
<p style="display:none;">This is a test paragraph</p>

you have 2 options , set the css property right in the html like the other answers
<div id="description" style="display: none">
or wrap your javascript in something to tell the page to run the stript on page load
using jQuery
$(document).ready(function(){
//your code
});
or
$(function(){
//your code
});
or regular old javascript
window.onload = function(){
//your code
});