Toggle class of search input on hover of another element - javascript

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/

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>

Hide / Show multiple items with Jquery

I have searched around and seem to be getting the same answer to all the people who have asked a similar question so please forgive me if it seems simplistic. I am trying to hide/show multiple items at the same time with the pressing of just one button, and it seems the only way I have come about doing so it by handling it with the class, such as below:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
and the html as follows
<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>
I dont want to do so using an html selector like
<p>
as in my example because I want to use it for different types of items.
what about using a css class?
$(".btn1").click(function(){
$(".class-to-hide").hide();
});
html
<div class="class-to-hide">
<p>will hide</p>
</div>
<div>
<p class="class-to-hide">will also hide</p>
</div>
there are countless options you could use, just get familiar with your jQuery selectors and take your pick..
you could use class, which is $('.something')
data-target="something", which is $('*[data-target="something"]')
input type="number", which is $('input[type="number"]')
The other option (in addition the answer already presented) is you can use toggle to hide / show (allows you to use 1 button instead of 2):
<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>
will do both hide and show.
$(document).ready(function(){
$(".btn1").click(function(){
$("p.test").toggle();
});
});
You can use Class Selector (".class")
Selects all elements with the given class.
//It will select all paragraph with the given class
$("p.test").hide();
You should go through all the selectors
Try using the class instead:
$(document).ready(function(){
$(".test").click(function(){
$("p").hide();
});
$(".test").click(function(){
$("p").show();
});
});

Using jquery to get attribute value for multiple elements. Then use them

I have the following HTML:
<span class="thumbnav" id="?"><?php get_the_image(); ?></span>
<span class="thumbnav" id="?"><?php get_the_image(); ?></span>
<div class="?" style="display:none;">
Some image, and a bit of text are staring at you.
</div>
<div class="?" style="display:none;">
Some image, and a bit of text are staring at you.
</div>
My goal is to use jQuery to find the ID value for every <span>, then use that ID to set a .click() event that will trigger a .show() function on the <div> elements.
So far I have this:
var clasid = $(".thumbnav").attr("id");
$("#" + clasid).click(function () {
$("." + clasid).show();
});
Which works, but only for the first <span>.
So I was wondering if there is a way to make this script work for all the spans, I read the jQuery documentation and they suggest using either .map() or .each(), but I haven't been able to figure it out.
Also it would be great if anyone could give me a hint on how to hide a <div> that was active when a new <div> is being displayed.
Thanks!
you can write class event and dynamically access that element id:
$(".thumbnav").click(function(){
$("." + this.id).show(); // this.id will give you clicked element id
})
See FIDDLE EXAMPLE
You can simply bind them using:
$(".thumbnav").click(function () {
$('.'+this.id).show();
});

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

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();
});

toggleClass() on Parent not working even though the parent is being found

Hi I have the following HTML repeated in my page (obviously the names, for and id attributes change in each instance):
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
What this does with some CSS is make the give the appearance of a big button, the input is hidden and I add a class to the div depending on the checked value of the input. I use the following JavaScript /jQuery for this
$(".funkyCheckBox").live("click, tap", function(event){
$(this).toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).find("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this was all fine and good but during testing I noticed that if you click on the label text the class was not applied and the value of the input isn't toggled... thus I added the following...
$(".funkyCheckBox label").live("click, tap", function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this is great as clicking the label text now changes the value of the input however the parent DIV is not taking / toggling the "funkyCheckBoxActive" class. I am unsure why is as I then used console.log($(this).parent("div")) within the callback function and I am outputting the attributes of th dom object. Does anyone know why my toggleClass is not being applied?
Depending on the version of jQuery, your code will work or not.
Note that the browser is already toggling the checkbox when you click on a label that references it; so you would only need to do this:
$('#uniqueName').change(function() {
$(this).parents("div").toggleClass("funkyCheckBoxActive");
});
please use the "on" method instead of "live" as it is deprecated. also the "for" attribute in LABEL Tag points to an existing Id.
here is the corrected and working code:
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
and
$(".funkyCheckBox label").click(function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
var nextCheckBoxValue = nextCheckBox.val();
nextCheckBox.val(! nextCheckBoxValue);
}); ​
​
EDIT: here is the jsFiddle link
http://jsfiddle.net/RUYWT/
EDIT2: #Mike Sav: I have revised your code and it's working now with all possible cases:
http://jsfiddle.net/RUYWT/11/

Categories