Change css class on click?

Question

Okay, so I am pulling posts from a database, and I want to have two ways that visitors can view the data being pulled: gallery, and list view. So, I was first going to use tabs, but ended up not working good at all cause it was causing probs with search results and stuff when pulling the same content twice. So thought this idea might be better. It's kind of the same concept as tabs... it will just work differently...

Basically I want to have two links: 1.) Gallery View 2.) List View

When people land on the page all the data being pulled will be inside a div called "gallery", When people click on the "list view" link, I want the "gallery" class to change to "list" without reloading the page. And then when they click "Gallery View" again, it will then change the "list" class to "gallery" class again... It's just like tabs... the only difference is that we're working with one set of content. and instead of switching tabs... we're switching css classes on click.

This way I can edit the way the content is displayed through css.

Can this be done?

Do you need to know how to add/remove CSS classes? Or code your CSS so that it displays in the way you describe? — Brad, Nov 09 '12 at 15:04
since you have jquery, try the addClass() and removeClass() functions. That way you can manipulate your links into adding/changing css properties of your container — andrew, Nov 09 '12 at 15:06
A long paragraph with no code or error messages is usually a poor question -1 — Ruan Mendes, Nov 09 '12 at 15:07
possible duplicate http://stackoverflow.com/questions/12229413/javascript-change-css-file-dynamically-cookie — Luke94, Nov 09 '12 at 15:07

score 2 · Answer 1 · answered Nov 09 '12 at 15:10

2

Switch classes on click using toggleClass

$('button').click(function(){ 
    $('my-node').toggleClass('gallery list')
});

This removes the gallery class if it's already there, if it's not it adds it. Same goes for list

answered Nov 09 '12 at 15:10

Ruan Mendes

90,375
31
153
217

Change css class on click?

1 Answers1