I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});
You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>
Related
http://jsfiddle.net/cEJtA/
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
Can anyone please help with this code.
I want 5 divs that work based on the link that's clicked, so there are 5 divs either shown/hidden.
I can do everything except the if/else statement for more divs - any help please?
Off the top of my head, you can add a data attribute on the class and use that to toggle the targeted div element.
$(function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
$("a").bind("click", function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
<div class="div3">I'm div3</div>
<div class="div4">I'm div4</div>
<div class="div5">I'm div5</div>
</body>
</html>
you could also get the current element's class, parse it and generate div class name off of it and use that to show/hide things. e-g
link1 => div1 (replace link with div)
Try this way
<html>
<body>
Link 1
Link 2
<div id="link1" class="commonDiv">I'm div1</div>
<div id="link2" class="commonDiv">I'm div2</div>
</body>
</html>
$(function () {
$(".commonDiv").hide();
$(".link1, .link2").bind("click", function () {
$(".commonDiv").hide();
var id = $(this).attr("class");
$('#' + id).show();
});
});
I am fairly new to jQuery and I tried to create a show/hide toggle button without using jQuery's toggle function and I can't figure out what's wrong with the following code.
The Hide button hides the paragraph successfully. The hide part is working. It adds a class "show" and removes class "hide" and changes button's text. I used Dev Tools to see this and this part is working but clicking on the button again is not working i.e the show part.
$(document).ready(function() {
$(".hide").click(function() {
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
$(".show").click(function() {
$(".content").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
You can use toggle() to easily switch the visible state of an element using a single button. Then you can provide a function to text() to set the text on the button based on its current value. Try this:
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggle();
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>
If you wanted to do this without toggle(), then you could use toggleClass() to switch the state of the hide class, like this:
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggleClass('hide');
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>
You do not want to change the class - if you do you need to delegate so the event is registered to a static container like document
$(document).on("click",".hide",function() {
I suggest to toggle instead:
$(document).ready(function() {
$(".but").on("click",function() {
$(".content").toggle();
$(this).text($(this).text()=="Show"?"Hide":"Show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="but">Hide</button>
Without toggle
$(document).ready(function() {
$(document).on("click",".hide",function() {
$(".content").hide();
$(this).text("Show")
.removeClass("hide")
.addClass("show");
});
$(document).on("click",".show",function() {
$(".content").show();
$(this).text("Hide")
.removeClass("show")
.addClass("hide");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
The click event only works when the element you add it to is built when the DOM is first created. As soon as you change the class name of the button from 'show' to 'hide' this "removes it from the DOM" in an event based sense.
To get the button click event to trigger after you change the class name on the button you must assign the click event using the on() function and the function must be placed on the parent container of the element that will trigger the event. In the example below I have added the on() method to the document object, so all elements within the document that have a class of .hide or .show will inherit these click events. This will also apply to any new elements you create on the fly.
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).on('click', ".show", function(){
$(".content").show();
$(this).addClass("hide");
$(this).removeClass("show");
$(this).text("Hide");
});
$(document).on('click', ".hide", function(){
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
</script>
You should also use the toggleClass() method #mplungjan suggests.
Here's the jQuery docs for the on() function https://api.jquery.com/on/
$("#show-hide").toggle(function() {
$(".content").hide();
$(this).text("Show");
}, function() {
$(".content").show();
$(this).text("Hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button id="show-hide">Hide</button>
I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:
Html
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Jquery
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").trigger('click');
});
});
With the above code, I'm only able to do half of what I want. So, tried the following, did not work.
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").on('click');
});
$("button").click(function () {
$("#bigbutton").off('click');
});
});
PS. I'm extremely sorry about the formating errors as my phone has a broken screen.
Something like this?
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseover(function () {
$("#bigbutton").trigger('click');
});
$("#button1").click(function () {
$("#bigbutton").off('mouseover').css("background-color", "");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
in my webpage i set visibility of a div hidden and i want to show it on button click,so i am writing a jquery code for it.
but some how it is not working
my asp code is
<asp:Button ID="btnGenerate" CssClass="button" runat="server" Text="Generate" OnClick="btnGenerate_Click" />
<div id="print" style="width: 80%; margin-left: 10%; margin-top: 20px;visibility:hidden;">
<input type="button" id="btnPrint" class="button" value="Print" onclick="printDiv('ReportDiv')"/>
</div>
and my jquery code for it is:
<script>
$(document).ready(function () {
$("#btnGenerate").click(function () {
$("#print").css("visibility", "visible");
});
});
</script>
please help me to fix this issue.
Thanks
Because you gave a wrong ID, Look at your html <div id="print" ...
$(document).ready(function () {
$("#btnGenerate").click(function () {
$("#print").css("visibility", "visible");
});
});
try it
<script>
$(document).ready(function () {
$("#<%= btnGenerate.ClientID %>").click(function () {
$("#print").css("visibility", "visible");
});
});
</script>
you can not get asp.net button click in jquery using $("#btnGenerate") if you want to use asp.net button in jquery then you will have to use like this $("#<%= btnGenerate.ClientID %>")
child element will not be visible until his parent element is visible. So you need to show parent div.
Here parent div #print is hidden and you are trying to show its child div #btnPrint you have to make parent div #print visible.
try this:
$(document).ready(function () {
$("#btnGenerate").click(function () {
$("#print").css("visibility", "visible");
});
});
Because .net will change the id while rendering, being runat server. You should use class for that
$(document).ready(function () {
$(".button").click(function () {
$("#print").css("visibility", "visible");
});
});
I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.
When a user selects the textbox I want to change the desired div tag.
This is how the html looks
<div class="left">
<div class="right">
<input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
<span id="rfInput"></span>
</div>
</div>
my jquery looks like this
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$('.box.left').addClass("active");
}).blur(function () {
$('.box.left').removeClass("active");
});
});
</script>
Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class="myTextBox" how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?
Any help would be great!
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
})
.blur(function () {
$(this).closest('.left').removeClass("active");
});
});
</script>
this refers to the element that received the event.
So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.
.closest() - http://api.jquery.com/closest/
you were not that clear, so, here,s my guess...
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
}).blur(function () {
$(this).closest('.left').removeClass("active");
});
});