Develop Reference

How to expand div after click and collapse it after another click?

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

How to get jquery plug-in mmenu to jump to an element ID

So below is my jade template syntax. I'm using this as to make this easier to read on Stack Overflow & for myself. My html comes out fine with the below four links being clickable in mmenu. I'm not getting any javascript errors & I'm loading both of the all css, js files that mmenu has avalible. Whenever I click on the links nothing happens on mobile. They literally don't do anything. I need them to jump to the divs that have the IDS listed. Any thoughts, ideas or support is much appreciated.
div(class='container-fluid noPadding mobileNavContainer')
nav#mobileMenu
ul
li
a(href='#home') Home
li
a(href='#aboutUs') About us
li
a(href='#gallery') Gallery
li
a(href='#contact') Contact
As far as jQuery code goes it is just the default mmenu code & the menu shows up, the dropdown works as it should etc. The problem is that my a links aren't jumping to the elements when I click on them in the mmenu.
Here's my jQuery code.
$("#mobileMenu").mmenu({
// options
}, {
// configuration
offCanvas: {
pageNodetype: "nav"
}
});
$("#mobileMenu").mmenu();

I solved this by going into the mmenu.all JS file and commenting out anything related to OnClick.

jQuery show list items

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

CSS-sprite menu and jQuery addClass() method

I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)

Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.

I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.

Scrolling effect with the destination highlighted with jQuery

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.