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>

image popup in javascript

i need to give popup for all the images displayed under a div
i tried to add div before and after image tag but its not appending properly
this is my following code
<div class="description">
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0"></div>
Expected output
<div class="description">
<div class="fancybox"> //class to be added
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>

You can use some JQuery for this, but you have to change the html code a bit.
See snippet
$('.imagepopup0').click(function() {
$('.outer').toggle('show');
$('.fancybox').toggle('show');
});
/* Not needed, just for show */
.fancybox {
background-color: blue;
}
.description {
background-color: red;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
<div class="fancybox" style="display: none;">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
</div>
</div>
JSFiddle

Original answer: jquery, wrap elements inside a div
Could use the .wrapAll() method:
$('#imagepopup0').wrapAll('<div class="fancybox"></div>');
The wrapAll() method will wrap all the elements matched into another element whereas the .wrap() method which wraps the matched elements individually.

Thank you for your suggestion friends i have found a simple solution for that instead of using div i user a tag and fancy box in it
the following code working fine for me
$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');
<script type="text/javascript">
// FANCYBOX JS
$(document).ready(function(){
$(".fancybox").fancybox({
// openEffect: "none",
// closeEffect: "none"
});
});
</script>

Append does nothing

I'm trying to add an element after removing another:
$("a.III").click( function(e) {
var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>';
e.preventDefault();
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul").fadeIn("slow");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">
</span>
Nothing happens after the older div's fadeOut. I assume I'm doing something wrong while trying to append the new element.

Your code works fine, the problem is most likely that you don't have any content in the divs you're removing/appending, so you can't see that it's working. Here's your exact code but with content in the divs so you can actually see the script working(added an anchor with class of III which I'm assuming you forgot to include in your post):
$("a.III").click( function(e) {
e.preventDefault();
var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>';
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul2").fadeIn("slow");
});
});
a.III {
display:block;
margin-bottom:20px;
}
.tagul2 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="III">Click me</a>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div>
</span>
<span class="content" style="float: right">
</span>
Additionally, your fadeIn() function for the appended element won't actually do anything because the div is set to display by default(essentially you're trying to fade in an element which is already visible). In order to have it fade in, you could change the class of the element you're appending, set the CSS to display:none; and then the element will fade in after being appended(I have made this change in my answer).

jquery slideToggle opens all divs instead of just the div that is required

I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>

(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})

After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.

JS Target a class directly above element

i'm trying to use jQuery to add/remove a class to an element but I only want to target the '.content' class that is directly above the '.trigger' essentially making each work independently of each other.
Any ideas on the best way to do this?
Thanks in advance
HTML
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
CSS
<style type="text/css">
.showHide{
display: none;
}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$('span.content').toggleClass('showHide');
});
});
</script>

Try using .prev() that will only target the .content element which is a immediately preceding sibling of your .trigger element:
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).prev('span.content').toggleClass('showHide');
});
});

You could also use siblings(). It will only target everything in the same container
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).siblings('span.content').toggleClass('showHide');
});
});
Fiddle
This method will allow the .content to be anywhere in the container, whether it is before or after the .trigger