Hjälp med mini jQuery slideToggle med cookies!

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Hjälp med mini jQuery slideToggle med cookies!

Hejsan!

Shit alltså, nu har det blivit lite för invecklat för mig, jobbar aldrig med cookies men tänkte att jag skulle testa det!

Jag har följt denna guiden:
http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-c...

Deras kod är väldigt enkelt att implementera och använda men jag orkar inte använda så extremt mycket kod varenda gång jag skall göra något cookiebaserat på hemsidan.

Mitt nuvarande slideToggle ser ut såhär:

<script language="javascript"> $(document).ready(function() { $('#toggle').hide(); $('a.sidebar_toggle').click(function() { var id = $(this).attr('id'); $('#toggle' + id).slideToggle(200); // alert(id); return false; }); }); </script>

HTML:

<div class="sidebar_logo"><a href="#" id="1" class="sidebar_toggle"></a></div> <!-- Nertill är det som ändrar class med hjälp av jQuery för att dölja/visa --> <div id="toggle1" class="commentbox" style="display:none"> <div id="sidebar"> Lite dolda grejjer </div><!-- #sidebar, END --> </div><!-- #toggle1, END -->

Detta fungerar som så att ID:et i länken stämmer överens med det som är efter <div id="toggle på raden under!

Så om <a href="#" id="-hund" blir det <div id="toggle-hund" för att man skall kunna skapa massa olika unika show/hide element utan att behöva en unik javascriptkod.

Iallafall, nu till det avancerade, går det att implementera cookies till den javascriptet jag använder, har testat massa grejjer och ju mer jag testar ju längre från en lösning verkar jag komma:

Style ändras alltså till display: none; respektive display: block;

Min kod ser nu ut såhär:

<script language="javascript"> $(document).ready(function() { $('#toggle').hide(); $('a.sidebar_toggle').click(function() { $('#toggle1').css("height","20px"); $.cookie('sidebar', 'collapsed'); var id = $(this).attr('id'); $('#toggle' + id).slideToggle(200); // alert(id); return false; }); var sidebar = $(this).cookie('sidebar'); if (sidebar == 'collapsed') { $('#toggle').css("display","none"); $('#toggle1').css("display","block"); $('#toggle1').css("height","20px"); }; }); </script>

Den lägger ju åtminstonde till 20px efter display: block; som förväntat så endel av den "nya" koden fungerar, men inte cookie delen!

Oj, det blev mycket

Vore jättetacksam för hjälp

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

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

.hide() sätter display: none

Det ska väl inte vara $(this).cookie() utan $.cookie() ?