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();
});
Related
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>
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>
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 :)
I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text.
What should i use ? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
Fiddle Demo:
http://jsfiddle.net/Hive7/5xueU/2/
You can try this one
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
The HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
To toggle the arrows back, try checking for the visibility of the .pad element:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});