(jQuery) div's sliden naar min-width waarde.

Goedendag,

al enige tijd ben ik bezig met webdesign en andere dingen.
Echter heb ik geen evaring met Javascript (Nooit echt naar gekeken), en aangezien ik mij meer wil richten op Java,
heb ik Javascript niet echt nodig. Echter heb ik voor mijn portfolio wel Javascript nodig. Als afsluiting van deze zin wil ik jullie ook graag mijn "probleem" mede delen.

Stel u voor, ik heb 3 aside's;

<aside id="side_1"></aside>
<aside id="side_2'></aside>
<aside id="side_3"></aside>

En in mijn css ziet het er dan als volgt uit:

#side_1 {
float: left;
width: 500px;
height: 100px;
background-color: green;
}


#side_2, #side_3 {
float: left;
width: 100px;
height: 100px;
background-color: yellow;

Deze style en HTML document is natuurlijk niet de orginele, naar mijn idee kan ik het zo beter uitleggen dan doormiddel van een reeks "overbodige" style en tags.

Nou is het de bedoeling dat als er geklikt wordt op #side_2
dat #side_1 naar links geschoven wordt naar een width van 100px;
#side_2 zou ook naar links geschoven moeten worden met een width van 500px;
#side_3 zou gewoon 100px * 100px moeten blijven.

Wanneer er op #side_3 wordt gedrukt, moet zowel #side_1 als #side_2 naar links geschoven worden, met een width van 100px;
en #side_3 moet dan ook naar links geschoven worden, maar met een width van 500px;

en andersom ook.

Ik weet dat dit mogelijk moet zijn met jQuery, echter weet ik niet hoe;
Ik weet wel hoe je zo'n jQuery documentje kan opzetten namelijk;

$(document).ready(function(){
$("#side_1").click(function(){
// en hier moet dan iets dat dit kan realiseren, met toggle ofzo?
});
});

Hopelijk snappen jullie wat ik bedoel,
m.v,g!

Hier bij heb ik een aantal screens gemaakt,

wanneer de pagina geladen is moet het er zo uit zien;

http://afbeelding.im/gJ2z

mocht je op de eerste (vanaf links gezet) "rode" vlak (div) klikken, moet het er zo er uit komen te zien;

http://afbeelding.im/OW6S

mocht je op laatste rode vlak klikken moet hte zo er uit komen te zien;

http://afbeelding.im/eAEgD

Echter wil ik wel dat als op een vlak drukt, deze div vergroot wordt en de huidige verkleint wordt naar de grote van een rode div.

Met vriendelijke groet!

Bedankt,

Dit is precies wat ik zocht!
Heb het scriptje bekeken, en het is me helemaal duidelijk!
Eigenlijk was er best een gemakkelijk oplossing voor

Nogmaals bedankt!

Bedankt,

Dit is precies wat ik zocht!
Heb het scriptje bekeken, en het is me helemaal duidelijk!
Eigenlijk was er best een gemakkelijk oplossing voor

Nogmaals bedankt!

Bedankt,

Kunt u mij misschien uit leggen wat ".siblings()" in deze line doet?

$(this).animate({width: '500px'}).siblings().animate({width: '100px'});

M.v.g,

Oke,

Als ik het goed begrijpt werkt het als volgende;

de $(this) staat voor het element waarop je gelikt heb (indien deze een init.click(); heeft.
.animate({width: '500px'}) maakt een animatie dat $(this) een breedte geeft van 500px.
.siblings() maakt een selectie van de andere twee waar je NIET op geklikt hebt.
.animate({width: '100px'}) maakt van deze selectie een animatie met als eindresultaat dat ze 100px worden.

Begrijp ik het goed?

Goedendag,

Bij deze heb ik een vraag over een uitbreiding,
Ik zou graag willen dat als een div de width: 100px heeft een <span> visible wordt, en die van 500px ontzichbaar wordt.

Ik heb nu deze code geprobeerd;
$(this).next("span").css("display: none;").siblings().css("display: inline;");

en in de html uiteraard bij elke div een span tag toegekend. Bij deze tag heb ik een inline element toegevoegd namelijk style, echter werkt dit niet...
Wat doe ik fout?