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>
Related
const bubbles = document.querySelectorAll('.bubble')
function filledBubble (event){
event.classList.toggle("filled");
}
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
})
Hello everyone,
I was trying to apply an event to my bubbles. So when we click, it will change the color.
But somehow, I don't know why my function didn't work . Also, on the console, it showed no syntaxic error either.
Do you see any error in my code ?
The HTML code
<h3>Select</h3>
<div class="container">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
As others have mentioned, the event.target.classList.toggle("filled") is the answer, but since you're saying it's not then you have the javascript initialization happening before the HTML has been rendered. In other words, put your javascript after your HTML.
OR, run the javascript initialzation after the page has loaded:
<head>
<script>
let bubbles
function initJS() {
bubbles = document.querySelectorAll('.bubble');
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
});
}
function filledBubble (event){
this.classList.toggle("filled");
}
</script>
</head>
<body onload='initJS()'>
...
<h3>Select</h3>
<div class="container">
<div class="bubble"> bubble 1</div>
<div class="bubble"> bubble 2</div>
<div class="bubble"> bubble 3</div>
</div>
use event.target event.target.classList.toggle("filled")
or this this.classList.toggle("filled")
demo:
const bubbles = document.querySelectorAll('.bubble')
function filledBubble (event){
this.classList.toggle("filled");
}
bubbles.forEach((bubble) => {
bubble.addEventListener('click', filledBubble);
})
.bubble { margin: .5em; cursor: pointer; }
.filled { background-color: green; }
<h3>Select</h3>
<div class="container">
<div class="bubble"> bubble 1</div>
<div class="bubble"> bubble 2</div>
<div class="bubble"> bubble 3</div>
</div>
I have an XML DB with movies. Each movies comes with a picture. On click on the picture modal opens and in the modal you can see the information about the movie. With the following code I am able to iterate over all my pictures, which are buttons.
btn.forEach(element => {
element.addEventListener("click", () => {
modal.style.display = "block";
} );
} );
Problem is, this opens the same modal all the time, meaning, the content is not dynamically changing, depending on the movie I click. I tried the following
btn.forEach(element => {
element.addEventListener("click", () => {
modal.forEach(item => {
item.style.display = "block";
});
});
});
But this changes the content to the last on the data base, showing again same modal all the time and also breaking the close span for all modals. How do I show a correct modal for each movie?
I would recommend not to use arrow functions here because of context or so to say binding 'this' the best way is to use a plain old function and some DOM traversing
The thing is you havent supplied code for btn so I don't know how are you selcting all buttons but I would do it like so:
Array.from(document.getElementsByClassName('btn')).map(btn => btn.addEventListener('click', function(){
const theContainer = this.closest('.container')
theContainer.getElementsByClassName('modal')[0].classList.add('show')
theContainer.getElementsByClassName('close')[0].onclick = function(){
this.closest('.modal').classList.toggle('show')
}
}))
.modal {
display: none;
}
.show {
display: block;
border: 1px solid red;
}
<div class='container'>
<div class='modal'>
<p> modal </p>
<button class='close'>X</button>
</div>
<button class='btn'>0</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 1</p>
<button class='close'>X</button>
</div>
<button class='btn'>1</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 2</p>
<button class='close'>X</button>
</div>
<button class='btn'>2</button>
</div>
<div class='container'>
<div class='modal'>
<p> modal 3</p>
<button class='close'>X</button>
</div>
<button class='btn'>3</button>
</div>
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();
});
I have a div with the following structure. When I click on "btn-edit", I want to remove the "show" class from "contentNote" and add it to "txtAreaNote"; and to add "hide" to "contentNote" and remove it from "txtAreaNote". My jQuery code does not work correctly; how to fix this?
$('.btn-edit').click(function() {
var btn = $(this);
btn.each(function() {
$(this).find(".contentNote").removeClass('show').addClass("hide");
$(this).find(".txtAreaNote").removeClass('hide').addClass("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
find() searches children of the element you're calling it on. Use nextAll() or siblings() to find following matches (or any matches, before or after, in the case of siblings()).
$('.btn-edit').click(function(e) {
e.stopPropagation();
e.preventDefault();
var btn = $(this);
btn.nextAll(".contentNote").removeClass('show').addClass("hide");
btn.nextAll(".txtAreaNote").removeClass('hide').addClass("show");
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
I dont know your full html structure, but it will be something like :
$('.btn-edit').click(function () {
$(this).closest(".cm-1").find(".contentNote").removeClass('show').addClass("hide");
$(this).closest(".cm-1").find(".txtAreaNote").removeClass('hide').addClass("show");
});
Go to parent class and then search in between two classes.
I want to hide a container when we click on remove button inside container and same time in navigation the name of container will be visible.
Now when we click on navigation link of that div, the container will be visible and hide the link from navigation.
I created one to make you more clear :
JSFIDDLE
HTML
<div id="1" class="main-container">
Remove
</div>
<div id="2" class="main-container">
Remove
</div>
<div id="3" class="main-container">
Remove
</div>
<div id="4" class="main-container">
Remove
</div>
<div class="navigation">
Container 1
Container 2
Container 3
Container 4
</div>
CSS
.main-container {
width:100px;
height:50px;
margin:10px;
float:left;
background-color:grey;
}
JS
$('.rem-widget').live("click", function() {
var currentId2 = $(this).parents(".main-container").attr('id');
$('#' + currentId2).hide('slow');
var currentId2 = $(this).parents(".nav-widget-add").attr('id');
$('#' + currentId2).show('slow');
});
$('.nav-widget-add').live("click", function() {
var currentId2 = $(this).parents(".main-containe").attr('id');
$('#' + currentId2).show('slow');
var currentId2 = $(this).parents("").attr('id');
$('#' + currentId2).hide('slow');
});
Try this,
HTML
<div id="1" class="main-container"> Remove
</div>
<div id="2" class="main-container"> Remove
</div>
<div id="3" class="main-container"> Remove
</div>
<div id="4" class="main-container"> Remove
</div>
<div class="navigation"> Container 1
Container 2
Container 3
Container 4
</div>
css
.main-container {
width:100px;
height:50px;
margin:10px;
float:left;
background-color:grey;
}
.nav-widget-add {
display:none;
}
this javascript code will make the container transparent when click on the remove link.
SEE THIS FIDDLE DEMO
$('.rem-widget').click(function () {
$(this).hide('slow');
$(this.parentNode).css('background-color', 'transparent');
$('a[data-navi=' + this.parentNode.id + ']').show('slow');
});
$('.nav-widget-add').click(function () {
var navIndex = $(this).index() + 1;
$('#' + this.dataset.navi).css('background-color', 'grey').children('.rem-widget').show('slow');
$(this).hide('slow');
});
this javascript code will hide the container when click on the remove link.
$('.rem-widget').click(function () {
$(this.parentNode).hide('slow');
$('a[data-navi=' + this.parentNode.id + ']').show('slow');
});
$('.nav-widget-add').click(function () {
$('#' + this.dataset.navi).show('slow');
$(this).hide('slow');
});
SEE THIS FIDDLE DEMO
i think this is what you are looking for
<script>
$( document ).ready(function() {
$('.main-container a.rem-widget').click(function(){
$(this).parent().hide('slow');
$('.'+$(this).attr('id')).show('slow');
});
$('.navigation a').click(function(){
$(this).hide('slow');
$('#'+$(this).attr('class')).parent().show('slow');
});
});
</script>
<body>
<div class="main-container">
Remove
</div>
<div class="main-container">
Remove
</div>
<div class="main-container">
Remove
</div>
<div class="main-container">
Remove
</div>
<div class="navigation">
Container 1
Container 2
Container 3
Container 4
</div>
</body>
Is this what you are looking for? Your question was quite confusing. But as per your comments, i think this is what you want. I hope I am write.
Change you HTML to this
<div id="1" class="main-container">
Remove
</div>
<div id="2" class="main-container">
Remove
</div>
<div id="3" class="main-container">
Remove
</div>
<div id="4" class="main-container">
Remove
</div>
<div class="navigation">
Container 1
Container 2
Container 3
Container 4
</div>
and your jQuery to this
$(document).ready(function() {
$('#container1').hide();
$('#container2').hide();
$('#container3').hide();
$('#container4').hide();
$('#maincontainer1').click(function() {
$('#1').hide('slow');
$('#container1').show();
});
$('#maincontainer2').click(function() {
$('#2').hide('slow');
$('#container2').show();
});
$('#maincontainer3').click(function() {
$('#3').hide('slow');
$('#container3').show();
});
$('#maincontainer4').click(function() {
$('#4').hide('slow');
$('#container4').show();
});
$('#container1').click(function() {
$('#1').show('slow');
$(this).hide();
});
$('#container2').click(function() {
$('#2').show('slow');
$(this).hide();
});
$('#container3').click(function() {
$('#3').show('slow');
$(this).hide();
});
$('#container4').click(function() {
$('#4').show('slow');
$(this).hide();
});
});
Here's a working JSFiddle
What I did was:
Added Id to each anchor tag (Remove link)
I have hidden all containers in navigation in the beginning
And the rest, you can see :)