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?
