Develop Reference

jQuery expandable input div

I have a form with inputs are tasks with headers and its description. Is there any effective way in jQuery to make the details under header of each input able to toggle every time the header is clicked?
Here is the HTML:
<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/2017</div>
<div class="task-description">Description</div>
</div>

You can do something like this:
$('.task-header').click(clickFunction)
function clickFunction () {
if ($('.task-description').is(":visible")) {
$('.task-description').hide()
} else {
$('.task-description').show()
}
}
Functioning example: https://codepen.io/rp3/pen/yLOGgKB
If you wanted a solution for multiple headers & descriptions, data attributes might be the way to go. Add data attributes to the html you posted:
<div class="todo-task" data-headergroup="1">
<div class="task-header" data-headergroup="1">Sample Header</div>
<div class="task-date" data-headergroup="1">25/06/2017</div>
<div class="task-description" style="display: none" data-headergroup="1">Description</div>
</div>
Then the js would be something more like this:
$('.task-header').click(clickFunction)
function clickFunction () {
let headerGroupNumber = this.getAttribute('data-headergroup')
if ($('.task-description').is(":visible")) {
$(".task-description[data-headergroup='" + headerGroupNumber +"']").hide()
} else {
$(".task-description[data-headergroup='" + headerGroupNumber +"']").show()
}
}
Example: https://codepen.io/rp3/pen/BaKvpOv

You can use the .toggle() function of jquery to show and hide details when the header is clicked.
Here I have wrapped your details with a new div with id="taskDetails" and when the header with id="taskHeader" is clicked it will toogle the details.
for further adding the toogle option you can refer https://api.jquery.com/toggle/
$("#taskHeader").click(function() {
$("#taskDetails").toggle();
});
.task-header {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="todo-task">
<div id="taskHeader" class="task-header">
Sample Header
</div>
<div id="taskDetails">
<div class="task-date">25/06/2017</div>
<div class="task-description">Description</div>
</div>
</div>
Updated:
If you have multiple divs with todo-task you can do by following:
$(function() {
$(document.body).on("click", "div.task-header", function() {
$(this).nextAll().toggle();
});
});
.task-header {
cursor: pointer;
}
.todo-task {
padding-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/2017</div>
<div class="task-description">Description</div>
</div>
<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/2017</div>
<div class="task-description">Description</div>
</div>

remove element with specific class only when other class is active

I have an element that can be removed when it has the class "edit-mode". The class "edit-mode" is toggled by a button. The problem here is that when the "edit-mode" class gets removed, this element can be removed on click which shouldn't happen.
Consider the following code :
$(document).ready(function() {
$('.active-edit-mode').click(function() {
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
$('.my-element.edit-mode').click(function() {
$(this).remove();
});
});
});
.my-element {
color: #007aff;
cursor: pointer;
}
.edit-mode {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
</div>
<button class="active-edit-mode">
active edit mode
</button>
Jsfiddle : jsfiddle

You should check this logic in the onClick event handler of .my-element, this would be more clearer.
$(document).ready(function(){
$('.active-edit-mode').click(function(){
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
});
$('.my-element').click(function(){
if ($(this).hasClass('edit-mode')) {
console.log('click removing')
$(this).remove();
}
});
});
.my-element { color: #007aff;cursor:pointer; }
.edit-mode {font-weight:bold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elements">
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
<div class="my-element">
this element
</div>
</div>
<button class="active-edit-mode">
active edit mode
</button>

It will work if you bind the removal function independently. Your JS would look like:
$(document).ready(function(){
$('.active-edit-mode').click(function(){
$('.my-element').toggleClass('edit-mode');
$('.active-edit-mode').toggleClass('edit-mode');
});
});
$(document).on('click','.my-element.edit-mode',function(){
$(this).remove();
});

Jquery hover on div, add styles on grandparent

I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.

You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).

Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>

When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com

How to check if toggle function show item?

I have this code ...
<div class="btn1">Button</div>
<div class="text1">Some text</div>
...
$(document).ready(function(){
$(".btn1").click(function(){
$(".text1").toggle();
});
});
<div class="block2">Some text 2</div>
I want to hide ".block2" when toggle function show ".text1" and show ".block2" when ".text1" is hidden. How can I do that? I hope my question is clear. Thanks for answers.

1) see this http://jsfiddle.net/a6kqvLj8/
Just make the second block diaplay:none, and do the same operations
on it
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
$(".block2").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2" style='display:none;'>Some text 2</div>
2) Or if you want the both blocks to be visible at first, and the
start toggling on click, you can do this:
http://jsfiddle.net/a6kqvLj8/1/
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
if ($(".text1").css('display') == 'none') {
$(".block2").css('display', 'block');
} else {
$(".block2").css('display', 'none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2">Some text 2</div>

show image on hover just for the actual hovered element

I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!

function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.

$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});

Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});