I recently have been experimenting with jquery in hopes to expand my knowledge. I have come across something odd though. I have a navigation where I want users to be able to expand it even further. However, everytime I click expand it opens up all menus rather than a specific one.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').css('display','block');
else
$('.nav-bucket-items').css('display','none');
});
Here is the code I've used and here is the example: https://jsfiddle.net/xajoujsx/
As you can see, when you click the expand + button, it opens up all navigation. I just wanted it to open up the one I click around. Can anyone explain what I'm doing wrong?
From inside the click handler you can refer to .nav-bucket-items using:
$(this).parent().siblings('.nav-bucket-items')
fiddle
The code currently performs it on all elements with class .nav-bucket.
One option is to only apply to the immediate items for the parent.
$('.expandicon').click(function() {
var $ref = $($(this).parent().parent()).find('.nav-bucket-items')
if ($ref.css('display') == 'none')
$ref.css('display', 'block');
else
$ref.css('display', 'none');
});
Few things going on here, first, you're targeting all of the elements when you do $('.nav-bucket-items')
If you run that in your console you should see a list of elements rather than a single one, so what we want to do is target the parent, and then find the sibling, we also want to target the element link not the icon so that way the user can click the entire element to expand.
Working example: https://jsfiddle.net/dg4z271m/1/
I love it when I can learn someone more about their code than just fix the code for the sake of answering the question.
First, let me start by saying you don't need the .css('display','block'); to show or hide elements because .show() en .hide() does that for you. Amazing isn't it?
So, now we are left with this.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').show();
else
$('.nav-bucket-items').hide();
});
But now we still have the problem of the multi-expanding menu. This is because you show (or hide) alle elements with the class '.nav-bucket-items' We just wan't the ones that are family of the .expandicon we've clicked! You can do that with $(this). You can use $(this) to traverse from the element you've clicked. Lets see.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$(this).parent().next('.nav-bucket-items')
else
$(this).parent().next('.nav-bucket-items')
});
When you use this, it will all be working as you wished. But we can do better than this! We can make it shorter, better and cleaner. We don't have to check if .nav-bucket-items is visible. Nope.
$('.expandicon').click(function(){
$(this).parent().next('.nav-bucket-items').toggle();
});
Did you see what happened? We just changed that whole bunch of code to one line that just toggles the element. So it will hide it when its shown and it will show when its hidden! If you really want some fancy effects, you could use slideToggle() or fadeToggle() instead of .toggle(). I updated your JSFiddle: https://jsfiddle.net/xajoujsx/3/
Related
I have an explandable/collapsible element that I created using Simple-expand
(A jQuery plug-in to expand/collapse elements).
What I want to do is change the css of the element when user clicks on it, expanding it ,and change it again when user clicks on it again ,collapsing it.
Problem is, I don't know how to do that. I know how to change class on click, but how can I change the CSS after the user "unclicked" this tab and it shrinked up?
EDIT: Thanks to George for correcting me on what I wanted to do, to be more clear. I was a bit tired, so I needed it fast. I know this is really bad excuse, but I fully understand and respect you guys, who gave me negative feedback.
Basically what I needed, is:
There's 6 different divs;
When you click on one div, it will expand;
When you click on another div, it will check if ANY OF THESE divs are EXPANDED, if YES - close (collapse) them, and open that div which I clicked on.
For that simple task (it's really simple, it's just me being stupid) I needed to use jQuery this statement and a few if's.
I found a solution after 15 mins after publishing this post here and I wanted to delete it, unfortunately, I can't, because it has answers.
Thanks to everyone who tried to help me, I appreciate your help.
Cheers!
Just use a class for when the element is expanded and toggleClass() to toggle the class on click
$( ".your_element" ).click(function() {
$( this ).toggleClass( "expanded" );
});
fiddle Demo
CSS
.active {
background-color: #CC0000;
font-weight:bold;
color:#FFFFFF;
}
jQuery
$('#button').click(function () {
$("#colormethis").toggleClass('active');
});
Use class active than toggleClass using jQuery
This how you change CSS. So try making it in your own code.
You can use materialize css collapsible link
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
I am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.
I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?
$(document).ready(function(){
$('#novelDescrip').hide();
$('#barDescrip').hide();
$('.novel').hover(function(){
$('#novelDescrip').fadeIn('slow', 1);
},
function(){$('#novelDescrip').hide();}
);
$('#barminder').hover(function(){
$('#barDescrip').fadeIn('slow', 1);
},
function(){$('#barDescrip').hide();
});
});
This should explain the use of toggle as well as the link Jorge posted.
How do I check if an element is hidden in jQuery?
Here are a few methods to get you started with the jQuery toggle function:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
The slide and fade are used to give the toggle a slide or fade out effect.
You can also use the following attributes for different things:
$('element:hidden')
$('element:visible')
Or you can do the same with is:
$(element).is(":hidden")
$(element).is(":visible")
Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.
Hope that helps.
I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/
EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();
Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});
after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.