[Løst] Minimerbar div/ sidepanel

[Alekplay]

Heisann!

 

Jeg lurer på hvordan man kan lage en minimerbar div/ sidepanel via enkel jQuery/HTML & CSS3.

 

Jeg vet at det finnes en del tutorials for dette ute på nettet, blant annet på jQuerys hjemmeside, men de er ikke helt slik jeg vil ha det.

Mange av de som er rundt på nettet består av 2 DIVs. En som alltid er der (en slags klikkbar overskrift elns), og en som forsvinner (den med innhold). Det jeg vil ha er simpelthen en div, som ved å klikke på en liten knapp kan bli større eller mindre. Om det er noen som har Fronter-tilgang der ute så vet dere hva jeg snakker om (legger ved bilde). Wikipedia har også noe likende til det jeg vil ha, bare jeg at vil ha den til å kun trekke seg sammen horisontalt.

 

Sjekk f.eks. denne Wikipedia siden: http://no.wikipedia.org/wiki/FN

Hvis dere scroller litt ned ser dere "innholds"-DIVen. Den har en [skjul]/[vis]-knapp som gjør det jeg vil.

 

Fronter er litt mer eksakt på det jeg vil ha, bare ta en kikk på disse bildene:

 

etter klikk ->

 

Er det noen av dere som vet om en enkel måte å gjøre dette på?

 

 

 

EDIT 1:

Jeg skjønner det kanskje var litt vanskelig å se hva som skiller det jeg vil, fra hva som allerede finnes der ute. Altså, hvis dere ser på mange av de "sammentrekkbare" DIV tutorialene ute på nettet, så ser dere at de inneholder en slags "overskriftsdiv" øverst i den retningen den trekker seg sammen (for en div som trekker seg horisontalt sammen blir det til venstre for innholdet). Jeg vil ha det slik som på fronter eksempelet, altså at det ser ut som en div som bare blir mindre

Endret 6. januar 2013 av Alekplay

[Gjest]

CSS3 kan du ta i bruk for mobil-sider med Media Queries der automatisk foldes til liten.

Ellers er det jQuery / mootools du kan bruke

[molty]

Som standard hadde jeg satt den diven med alle elementene inni med fast vidde. Teksten legger du f.eks inn i et <span>

 

Når man minimerer boksen, kan du gjøre at alle <span> elementer inni boksen får display:none; og du endrer vidden på boksen.

 

Tror ikke det skal være så store problemer i jQuery med det

Endret 6. januar 2013 av molty

[Gjest]

Her har du et eksempel med jQuery.

EDIT: Fikset lenke.

Endret 6. januar 2013 av Gjest

[Alekplay]

Okei, jeg har skrevet denne koden som fungerer godt 2 ganger:

 

$('#knapp').click(function() {
  if($('#mainmenu').is(':hidden')) {
   $('#mainmenu').css("display", "inline");
   $('#aside').animate({width: "300px"},250);
  } else {
   $('#mainmenu').css("display", "none");
   $('#aside').animate({width: "60px"},250);
}
});

 

Den starter standard som stor. Deretter trykker jeg og den blir liten. Så trykker jeg igjen og den blir stor. Trykker jeg nå en tredje gang skjer det ingen ting. Hvorfor det?

[blackbrrd]

Du setter display til inline, da fungerer ikke height/width såvidt jeg vet. Prøv enten med block eller inline-block. Div-er er default block.

Endret 6. januar 2013 av blackbrrd

[Crowly]

I stedet for .css() for å vise skjule ett element, bruk funksjoner som er beregnet på det

 

http://api.jquery.com/hide/

http://api.jquery.com/show/

http://api.jquery.com/toggle/

 

$('#knapp').click(function() {
  if($('#mainmenu').is(':hidden')) {
     $('#mainmenu').toggle(true); // alternativt: $('#mainmenu').show();
     $('#aside').animate({width: "300px"},250);
  } else {
     $('#mainmenu').toggle(false); // alt: $('#mainmenu').hide();
     $('#aside').animate({width: "60px"},250);
  }
});

// eller så er det nok mulig å legge toggle() utenfor if'en, da toggle viser elementet hvis det er skjult og motsatt
$('#knapp').click(function() {
  if($('#mainmenu').is(':hidden')) {
     $('#aside').animate({width: "300px"},250);
  } else {
     $('#aside').animate({width: "60px"},250);
  }
  $('#mainmenu').toggle();
});

Endret 6. januar 2013 av Crowly

[Alekplay]

Det fungerte, tusen takk!