How to toggle elements with jQuery? -


i building website page has 16 items of apparel.

i want simple text navigation has option show , hide products either men, women, , all.

navigation 

<ul class="sortnav"> <li class="first">view:</li> <li class="men button">men</li> <li class="women button">women</li> <li class="all button active">all</li> </ul>

products code

<span class="prod men">guys shirt</span> <span class="prod men">guys pant </span> <span class="prod women">girls pant</span> <span class="prod women">girls pant</span>

tricky part
1 button can "active". , class visible (one or two) triggered.

thanks in advance.

thanks! kinda combined 2 responses. check out...

$('.products li.prod').toggle(true);  $('.sortnav li.button').click(function () {     $('.sortnav li.button').removeclass('active');     $(this).addclass('active'); });  $('.sortnav li.men').click(function () {     $('.products li.prod').toggle(false);     $('.products li.men').toggle(true); });  $('.sortnav li.women').click(function () {     $('.products li.prod').toggle(false);     $('.products li.women').toggle(true); });  $('.sortnav li.all').click(function () {     $('.products li.prod').toggle(true);

i compacted little bit code, should change li items

html:

<ul class="sortnav"> <li class="first">view:</li> <li section="mens" class="men button">men</li> <li section="womens" class="women button">women</li> <li section="all" class="all button active">all</li> </ul>  <div id="all" class="section">all clothing</div> <div id="mens" class="section">mens clothing</div> <div id="womens" class="section">womens clothing</div>

js:

$(document).ready(function(){     $('li.button').click(function(){ //listens each element li class button         $('li.button').removeclass('active'); //removes 'active' class of them         $(this).addclass('active'); //adds class 1          $('.section').toggle(false);         $('#'+$(this).attr('section')).toggle(true);     });      $(".section").toggle(false); });

as see added section attribute, can assign toggle(true) id. it's bit risky, works.


Comments

Post a Comment

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

i trying find efficient way previous revision of file text comparison using sharpsvn. using (svnclient c = new svnclient()) { c.authentication.defaultcredentials = new networkcredential( configurationmanager.appsettings.get("svnserviceusername") , configurationmanager.appsettings.get("svnservicepassword") , configurationmanager.appsettings.get("svnservicedomain") ); c.authentication.sslservertrusthandlers += new eventhandler<svnsslservertrusteventargs>(authentication_sslservertrusthandlers); collection<svnfileversioneventargs> fileversioncollection = new collection<svnfileversioneventargs>(); svnrevisionrange range = new svnrevisionrange(0, this.hooks.revision); svnfileversionsargs args = new svnfileversionsargs(); args.retrieveproperties = true; args.range = range; foreach (svnchangeitem item in log.changedpaths) { string path = this.repositorypath + it...
Read more

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

url - Querystring manipulation of email Address in PHP -

i using third party application (email2http) send me emailid, body , message. unable retrieve email id due name appended on , enclosed < , >. here querystring getting. test.php?from=ajay+reddy &subject=cx&body=somebody when print variable in php returns name , not email id. $from = $_get['from']; echo $from; //output ajay reddy please suggest me how can emailid also. i dont want use post method due testing , debugging. it's working fine. forgot use htmlentities() in debugging.
Read more