Develop Reference

How to know which element is clicked and toggle class to it? JS Jquery

I have 4 divs like this, with class work:
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
And I want to toggle clicked class to clicked div:
.clicked {
font-size: 25px;
}
How to do it?

$('.work').on('click', function() {
$(this).toggleClass('clicked');
})
Geez, why couldn't you just go check the documentation!

There is a function in jquery named toggleClass.
You should attach a click event to your div and then use this to reference to the clicked element.
$('.work').click(function() { // edited: from $(.work) to $('.work')
$(this).toggleClass("click")
})

Here you go with a solution https://jsfiddle.net/7ep3e4gn/
$('div.work').click(function(){
$(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});
.clicked {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda2</h3>
<p>Panda2 eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda3</h3>
<p>Panda3 eats apple.</p>
</div>
I've used addClass & removeClass along with jQuery siblings method.
Hope this will help you.

Jquery has a method just for that.
$('.work').click(function(e) {
$(e.target).closest('.work').toggleClass('clicked');
});
The .closest() is in case the click was registered on the contained image, etc.

If you want only one of the div's with the class .work to have the .clicked class at a time, here's what you do:
$('.work').on('click', function() { //When the div 'work' is clicked
$('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'
$(this).addClass('clicked'); //Add the class 'clicked' to the div that was clicked.
});
Here's a fiddle for the same.

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.

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...

You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.

You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>

"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?

If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo

Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});

You can use css for this,
.parent_div:hover .hotqcontent {display:block;}

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();

$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE

you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});

you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});

How to have slideToggle for multiple items on one page?

Im having problems with this code to work.. http://jsfiddle.net/whitewiz/z4fpx/
HTML
<h1 id="flip">Title<h1>
<div id="panel">
<p>Description that slides down</p>
</div>
<h1 id="flip">Title<h1>
<div id="panel">
<p>description that DOESN'T slide down</p>
</div>
JavaScript
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
and CSS
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?
Example on -> http://jsfiddle.net/whitewiz/z4fpx/

The first one works because that is the first element in the DOM with that id. Generally it is bad practice to have the same id assigned to multiple elements. Instead, use classes, like this:
HTML:
<h1 class="flip">Title<h1>
<div class="panel">
<p>Description that slides down</p>
</div>
<h1 class="flip">Title<h1>
<div class="panel">
<p>description that DOESN'T slide down (but does now)</p>
</div>
CSS:
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
I assume you only want to expand the panel following the header that you clicked on, in which case you need to get the closest element with the class name "panel" that follows the "flip" that was clicked on.
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().find(".panel").slideToggle("slow");
});
});
Working example: http://jsfiddle.net/BBQJy/

The initial question seems to be lacking proper closing tags, an error that was duplicated in Nile's answer. Therefore, it didn't work for the original poster.
Based on Anna Brila's updated jsfiddle (http://jsfiddle.net/whitewiz/WuNHz/2), a possible correct solution would be:
$(".flip").click(function(){
$flip = $(this);
$content = $flip.next();
$content.slideToggle();
});
This is predicated on the use of classes instead of ids.
Full working example: http://jsfiddle.net/wy8gq1bj/1
Note: In the example, the only HTML I changed was the removal of the <br> immediately after the third , which was keeping the last item from expanding and collapsing.