show one div and hide the rest using javascript - javascript

I have this script that shows/hides a div. Could anyone please explain how I can get it to show only one div at a time?
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show();
}
else {
$(Div_id).hide();
}
}
</script>
and the link...
onClick="Show_Div(Div_1)
Thanks!

Try using this
$(document).ready(function(){
$('.parent div').hide(); // hide div's on load using parent class as a starting point
$('#nav a').click(function() { // on the anchor clicks that are inside div with id=nav
var $div = $('.parent div').eq($(this).index('#nav a')); // get the relevant div
$div.show(); // show the relevant div
$('.parent div').not($div).hide(); // hide all but the relevant div
});​
}):

if i understand your question correctly , maybe you can try this way:
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(this).show();
}
else {
$(this).hide();
}
}
</script>
if your use this in
$(this).show();
the only one will toggle which your click~
but in this way :
$(Div_id).show();
you will get a array of target , because the selector of Jquery will select a array of target .
hope it will help you~

Related

Script, input with addClass and link.attr

so I'm trying to wrap my head around this script.
I'm not the best with JavaScript and jQuery yet, but I'm trying to learn.
<script>
var link = $("#to-toggle");
$("#toggle").on("change", function() {
if (this.checked) {
.addClass("active");
link.attr("href", link.data("href"));
} else {
.removeClass("active");
link.removeAttr("href");
}
});
</script>
Before I added the .addClass and .removeClass it worked fine, but I can't seem to be able to get a class to toggle as well, when my check box is checked/unchecked.
Any help is greatly appreciated.
You forgot where to add and remove the class to/from ---> link:
if(this.checked) {
link.addClass("active");
link.attr("href", link.data("href"));
} else {
link.removeClass("active");
link.removeAttr("href");
}
});
Assuming #toggle to be your checbox Id and you are trying to add and remove class to this checbox, replace your line
.addClass("active");
By
$(this).addClass("active");
Similarly replace
.removeClass("active");
By
$(this).removeClass("active");
I am on mobile, excuse me for format issues.
if(this.checked) {
$(this).addClass("active");
link.attr("href", link.data("href"));
} else {
$(this).removeClass("active");
link.removeAttr("href");
}
});

Jquery how to add a class containing two dashes?

I have a simple page which toggles the visibility of departments, with a nice icon to show whether or not it is visible.
I am using font-awesomes icons "fa-eye" and "fa-eye-slash"
Problem is when using addClass jquery ignores the second "-" making
$(this).addClass("fa-eye-slash")
Add the class "fa-eye".
Its very strange and i've never encountered something like this with jquery. Please can someone assist me on how to overcome/work around this.
heres the fiddle http://jsfiddle.net/m5cdpnhk/
Thanks
You have two if conditions which run one after the other.
If the first if runs, then one of the things it does is $(elm).addClass('fa-eye-slash');.
The second if condition is if ($(elm).hasClass("fa-eye-slash")) so if the first if runs then the second will always run.
You need an else statement.
$(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
Add an else option (the problem is the two if without the else in this case)
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
//if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
//}
}
});
or toggle the class
.red:before{
color:red
}
.green:before{
color:green;
}
$(".box-body ul li i").click(function () {
var elm = $(this);
$(elm).toggleClass("fa-eye").toggleClass("red");
$(elm).toggleClass("fa-eye-slash").togglesClass("green");
});
i don't know why your code don't work but try this :
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}
});
http://jsfiddle.net/m5cdpnhk/2/
You have done mistake.you have to place "else if" at second if condition.
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}
else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}

I want to slideUp the current content then slideDown the clicked content with jQuery

I want the current content to slideUp and then slideDown the clicked content and I am stumped on why the code I have won't work. It just slides down the text . content. Any help much appreciated!
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
$(".contentContainer").html('.content');
}).slideDown(1500);
});
});
});
When you do .html('.content'), you're telling jQuery to literally make ".content" the innerHTML of the container (ex.: div or span with class .contentContainer).
It's a little unclear what content you are trying to place in .contentContainer, but assuming it is the html of the first tag with the class ".content", you could use this:
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
// Change this line...
$(".contentContainer").html($('.content').html());
}).slideDown(1500);
});
});
});
Edit: Updated to make it take the content of the first tag with the class ".content".
http://jsfiddle.net/nn0x6da8/2/

Remove dynamically generated div with jquery

I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>

On-click adding and removing background color of a table data(td)

i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.
jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.
You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });

Categories