jQuery, matcha en länk class med en div class och sen toggla en class?

Permalänk
Medlem

jQuery, matcha en länk class med en div class och sen toggla en class?

Hej!

Jag håller på med ett WordPress tema och har lite problem med jQuery: http://dev.rogatio.com/wordpress/thisisme/

Där finns det ett galleri som heter "Blommor", just nu visar det 7st bilder. Till höger om "Blommor" finne en länk:

<a href="#" class="<?php the_ID(); ?>" style="margin: 12px 0 0 10px; font-size: 12px; float: left;">View whole gallery →</a>

Sen nedanför listat bilderna:

<div class="the_content <?php the_ID(); ?>"><?php echo do_shortcode('[gallery columns="7"]'); ?></div>

Classen på länken blir i detta fallet 122, så när man trycker på den skall den leta upp en div med samma classnamn och lägga till/ta bort ytterliggare ett classnamn .active.

Alltså när jag trycker på länken, så skall den lägga till så att the_content diven ser ut såhär:

<div class="the_content <?php the_ID(); ?> active"><?php echo do_shortcode('[gallery columns="7"]'); ?></div>

Trycker man på länken igen så skall den ta bort "active" classen.

Hur gör man detta? Har kollat på http://api.jquery.com/toggleClass/ men får det inte att fungera, så, hmm någon vänlig själ som vill hjälpa mig?

Edit: har kommit en bit nu iaf:

jQuery:

// Function to toggle elements $(document).ready(function() { $('#toggle').hide(); $('a.dropdown-comment').click(function() { var id = $(this).attr('id'); $('#toggle' + id).slideToggle(250); // alert(id); return false; }); });

Länken:

<a href="#" id="dropdown<?php the_ID(); ?>" class="dropdown-comment" style="margin: 12px 0 0 10px; font-size: 12px; float: left;">View whole gallery →</a>

the_content:

<div id="toggledropdown<?php the_ID(); ?>" style="height: 85px; overflow: hidden; display: block; float: left;" class="the_content"><?php echo do_shortcode('[gallery columns="7"]'); ?></div>

Men nu döljer den ju .the_content istället självklart.

Men då är frågan, någon som vet hur man ändrar jQuery koden att byta ut height: 85px; till att vara height: auto; istället?

Edit 2
http://jsfiddle.net/VfA8V/

Så, enklast är ju att ändra jQuery koden så den lägger till/tar bort "height: 85px;" i style="" på diven, men jag vet inte hur man gör

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem

Väldigt fina blommor imo.

Visa signatur

Moderkort: ASUS P7P55D-E Pro, Grafikkort: Gigabyte HD6950 2GB, Processor: Intel i5 760 2,8GHz (3,6 GHz), Kylning: Noctua NH-U12P SE2, RAM: Corsair 4GB (2x2048MB) 1600MHz DDR3, Hårddisk: 1TB Samsung Spinpoint, Nätaggregat: Fractal Design Tesla 650W 80+, Chassi: Cooler Master HAF 912 Plus

Permalänk
Medlem
Skrivet av JesperA:

Edit 2
http://jsfiddle.net/VfA8V/

Så, enklast är ju att ändra jQuery koden så den lägger till/tar bort "height: 85px;" i style="" på diven, men jag vet inte hur man gör

jsfiddle vill inte just nu så jag ser inte hur det ser ut.

Du kan påverka ett elements CSS direkt med javascript/jQuery. jQuery har även en egen height()-metod.

$('id_på_div').height(0); //Sätter height till 0.
Mer här: http://api.jquery.com/height/

Eller så kan du göra på detta sätt:

$('id_på_div').css("height","0");
Mer här: http://api.jquery.com/css/

Felaktig paste
Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?