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
Related
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/
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'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the left menubar of wordpress once you are logged.
This menus has images with names, you can expand/collapse, if you hover you can see the options in a new extended window, if you click on it the menu expand with the same previously show options, ...
I've found some libraries/jquery plugins but they are not too close ...
I'm not tied to find a free open option, it can be a commercial one.
Maye it can be done with jquery collapse, but well, if it already exists, better ...
thanks,
Basic javascript and css will do the job, the menu is an ul and each menu-item is a li with another ul inside of it, which has display:none; in css. When you click it just use javascript to show it. For the hover just add an event listener to hover on each li-element and either show/hide the ul or append it.
Or am I missing something you're after?
Something like this?
Look at this demo
$('ul#tabs li').hover(function() {
$(this).find('ul').hide().stop().animate({height: 'toggle'});
}, function(){
$(this).find('ul').stop().animate({height: 'toggle'});
});
Works also with JS disabled.
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();
});
I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.