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
Hur kan syltkakor överleva i det vilda utan ögon?