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>
Related
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>
When I click one of these two buttons it toggles both the #hide and the .contact p at the same time. I tried adding a class to the ("button") selector.
$(document).ready(function(){
$("#hide").hide();
$("button").click(function(){
$("#hide").slideToggle("display");
});
$("#contact p").hide();
$("button").click(function(){
$("#contact p").slideToggle("display");
});
});
https://codepen.io/Shalise/pen/BmmEQJ/
You're querying $("button") which grabs an element. You will either want to query a class or an id. For example I added an id of #btn1 and #btn2 to two buttons respectively. Below is modified JQuery:
$(document).ready(function(){
$("#hide").hide();
$("#btn1").click(function(){
$("#hide").slideToggle("display");
});
$("#contact p").hide();
$("#btn2").click(function(){
$("#contact p").slideToggle("display");
});
});
use separate class or id in every button. ex:
HTML
<button class="button-1">First</button>
<button class="button-2">Second</button>
JS:
$(document).ready(function(){
$("#hide").hide();
$("button.button-1").click(function(){
$("#hide").slideToggle("display");
});
$("#contact p").hide();
$("button.button-2").click(function(){
$("#contact p").slideToggle("display");
});
});
If you want to hide those elements, you can add a class for example a class="hidden" and style it display: none instead of using jQuery hide method.
You're using a general button selector, if you have a specific id for each of those buttons, you can target them specifically.
Here is a good resource for using slideToggle: http://api.jquery.com/slidetoggle/
You add both functions to all buttons. That's why both functions where triggerd when you click any button.
As you say: Add a class or a id to the buttons to tell them apart and only add one function to each button
HTML
<button id="first">First</button>
<button id="second">Second</button>
JS
$(document).ready(function(){
$("#hide").hide();
$("button#first").click(function(){
$("#hide").slideToggle("display");
});
$("#contact p").hide();
$("button#second").click(function(){
$("#contact p").slideToggle("display");
});
});
I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>
The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.
I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview
but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>
More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
<div id="example" style="background:yellow;height:200px;width:200px;">
<button>Some text</button>
</div>
I want #example to .hide when it's clicked, but I don't want it to .hide when it's child elements get clicked.
Add a handler to the <div> and then check if it's the target.
In this example, the event.target is the element that was actually clicked, but this is the element attached with the handler.
$('#example').on('click', function(event) {
if (event.target === this) {
alert('div, not button');
$(this).hide();
}
});
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");
});
});