I can't write a switch to show and hide an element? - javascript

I want to write a switch to hide and show an element with the following code:
.hidden {
display:none;
}
<input type='text' id='other_elem' class='hidden' />
$('#elem').click(function(){
if($('#other_elem').is('display'))
$('#other_elem').hide();
else
$('#other_elem').show();
});
I successfully show the hidden text field when I click on the button but I can't hide it when it is appear. So, can some one provide me some hints? thank you!

You can use .toggle() to do that.
$('#elem').click(function(){
$('#other_elem').toggle();
});
else, to test the visibility use :visible selector
$('#elem').click(function(){
if($('#other_elem').is(':visible'))
$('#other_elem').hide();
else
$('#other_elem').show();
});

You want to use .toggle()
See this JS Fiddle example.
http://jsfiddle.net/sv5SV/
$('#elem').click(function(){
$('#other_elem').toggle();
});

Related

How to make HTML text hidden until clicked on

I'm trying to learn how to make HTML text toggle with jQuery, which is pretty easy in itself, but I want the text to be hidden automatically until it is clicked on with a button. I've looked it up and I can't find how to do this. I figured it should be easy, and I have this part
<h4 id="text1">This is some toggleable text</h4>
$(document).ready(function(){
$("#button1").click(function(){
$("#text1").toggle();
});
});
Which works fine as a regular toggle, but this leaves the text there until first clicked on.
Codepen: https://codepen.io/anon/pen/bYYeEB
The jQuery show,hide and toggle functions simply alter the CSS display property to have either display: block; or display: none;.
To start with your element hidden just set the style attribute style="display:none;".
$(document).ready(
function(){
$("#button1").click(toggle);
}
);
function toggle() {
$("#text1").toggle();
}
toggle();
Calling toggle at the bottom will auto hide the element. This still isn't the greatest since the element will show until this code runs.
But you can always change the HTML to read like this:
<h4 id="text1" style="display:none">This is some toggleable text</h4>
Then you don't need to call toggle the first time.
<script>
$(document).ready(function() {
$("#text1").css("display", "none");//you just have to add this line
$("#button1").click(function() {
$("#text1").toggle();
});
});
</script>

How use "display:none" with jquery or javascript?

I have the following HTML code:
<div id="ThanksWebPart" class="ThanksWebPartDisplay">
</div>
I want to be able to hide this <div> tag. I want to remove display:none if I'm on the previous page.
How do I remove display:none if I have a different location address?
With jQuery, use toggle() :
$('#ThanksWebPart').toggle(); // toggle again to make it appear again.
With Javascript, use the style.display property :
getElementById("ThanksWebPart").style.display = 'none'; //'block' to make it appear again.
$("#ThanksWebPart").css("display", "none"); to hide.
$("#ThanksWebPart").css("display", "block"); to show.
Alternatively, you can also use .show() and .hide().

Toggle class of search input on hover of another element

Hi I want to add a class to the search box when I hover over the i element then remove the classes added when I hover out.
<li><input id="search" type="text" class="search-box-hidden" placeholder="Enter Your Keywords..."> <i class="fa fa-search-plus fa-lg"></i></li>
$(document).ready(function(){
$(".fa.fa-search-plus.fa-lg").hover(
function(){ $(".search-box-hidden").toggleClass("search-box-shown") });
});
I edited my code. Basically when I hover over the icon from Font Awesome, it triggers the class that shows the search box and when I over out the search box will go back to the hidden class.
LIKE SO:
http://s27.postimg.org/pq2zeetw3/preview.jpg
With this code, it still does not work.
Thanks!
Firstly, you're missing . to target class fa, it should be:
$(".fa.fa-search-plus.fa-lg").hover(
// ^ here ----
Secondly, if you want to only target the input which is the previous sibling of your icon, then use:
$(".fa.fa-search-plus.fa-lg").hover(
function () {
$(this).prev().addClass("search-box")
},
function () {
$(this).prev().removeClass("search-box")
})
or you can use toggleClass() instead of add and remove here:
$("fa.fa-search-plus.fa-lg").hover(function() {
$(this).prev().toggleClass('search-box');
});
<script>
$(document).ready(function(){
$("#ElementToTriggerHover").hover(function(){
$("#ElementToSwitchClass").toggleClass("TheClassYouWantToToggle");
});
});
</script>
first, you have added three classes to your < i > not to input box and
second you are using all them at once seem to represent a hierarchy, so I think using any one of them would be enough.
also Instead of add and then removing in row, use toggleClass.
html :
<li>
<input id="search" type="text" class="hidden" placeholder="Enter Your
Keywords...">
<i class="fa fa-search-plus fa-lg"></i>
</li>
js:
$(".fa-search-plus").hover(
function(){ $(".hidden").toggleClass("search-box") });
OR
just simply use css :hover selecter as
.fa-search-plus:hover{
background-color:yellow;
}
You can do this with CSS.
I made a simple Fiddle using hover and transition.
Take a look. Maybe it helps.
Your query is missing a . at the beginning. Make sure you are doing it after DOM load and that you are loading jQuery on the page properly.
$(function() {
$(".fa.fa-search-plus.fa-lg").hover(
function(){
$(".hidden").addClass("search-box");
},
function(){
$(".hidden").removeClass("search-box");
}
);
});
EDIT:
Mockup, but with animation (not show/hide):
http://jsfiddle.net/v4FSh/

if an input radio is checked change the parent's color: can't make it work with jQuery

When I click an input radio, <label>'s text should change it's text color.
However it doesn't do the trick with my jQuery code:
$("#radios").find("input").change(function(){
if ($(this).checked)
$(this).parent().addClass('libelulas');
else
$(this).parent().removeClass('libelulas');
});
I've been checking with the inspector in chrome and seems like it doesn't even create the class wherever is the parent (label) or the input.
Here's my jsfiddle http://jsfiddle.net/Arkl1te/2MnEU/4/
You needed to wrap it in $(document).ready and use a correct selector on the change() event:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
});
});
jsFiddle here.
Update:
Forgot to give example in relation to your code in the question and not just the jsFiddle:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
$("input[type=radio]:not(:checked)").parent().removeClass('libelulas');
});
});
jsFiddle here.

Styling radio buttons (CSS/jQuery)

I have this: http://jsfiddle.net/ptWhn/
<pre>
/*HTML*/
`<label class="for_radio"><input type="radio"><span>radio-button-1</span></label>`
`<label class="for_radio"><input type="radio"><span>radio-button-2</span></label>`
/*jQuery*/
$(document).ready(function(){
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').addClass('active');}
else {
$(this).closest('label').removeClass('active');
}
});
});
/*CSS*/
.active {
background: #ffc;
}
</pre>
... which works in the sense that the label's background color changes when the radio button is selected, except that I can't figure out how to remove the .active class which changes the background color when one of the radio buttons is UNchecked. And also in jsfiddle, for some reason, the alternate radio button doesn't de-select when the other one is clicked.
The second thing I'm having trouble figuring out why is why I seem to need the .click(function() before the if statement. That is,
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').addClass('active');}
... doesn't work by itself as a JS snippet. Why?
Would appreciate any insight. Thanks.
Firstly, change your pre tags to script tags.
Instead of using an if statement to add and remove the class, why don't you just use toggleClass()?
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').toggleClass('active');
}
});
You don't need the if statement, try this:
$(document).ready(function(){
$('input[type="radio"]').click(function() {
$('input:not(:checked)').parent().removeClass("active");
$('input:checked').parent().addClass("active");
});
});
Also, you said "the alternate radio button doesn't de-select when the other one is clicked."
Add name attribute to your inputs, ie: Name="Group1"
Okay, so a few things here.
First, radio buttons in a group need to have the same name. For example:
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>
This will take care of the issue of the alternate button not deselecting.
To fix the issue of adding and removing your class use jQuery toggleClass:
$('input[type="radio"]').click(function() {
$(this).closest('label').toggleClass('active');
});
There is no need for the if statement. Hope that helps.
I'll try and answer the question, since everyone is focused on the fact you're using <pre> instead of <script>.
$('input[type="radio"]').on('change',function() {
$('label.active').removeClass('active'); //removes class on old active label
$(this).parent().addClass('active'); // adds class to new active label
}
The reason I did it this way instead of using .toggleClass() is because this will actually work if you have more than two radio buttons.

Categories