Hallo Allemaal,

Momenteel probeer ik een function() voor divSwap te maken om van (zoals de naam het al zegt) div's te gaan wisselen, maar na van alles geprobeerd te hebben wil het niet echt lukken.

Ik kan het gewoon lekker simpel houden, bijvoorbeeld dit:


$("#bewerken").click(function() {
$('#div_mydiv').slideUp('fast');
$("#div_mydiv_edit").slideDown('slow');
});
$("#sluiten").click(function() {
$('#div_mydiv_edit').slideUp('fast');
$("#div_mydiv").slideDown('slow');
});


Maar als je meerdere div's hebt, is dit dus niet handig en bovendien onnodig meer werk. Ook is het slordig als ik het op deze manier zou doen, dus wil ik graag een function aanmaken die de rest kan doen.

Voor zover ik ben:


var divSwap = function(div1, div2) {
	var divb = $(div1);
	
	if(divb)
	{
		$(div1).slideUp('fast');
		$(div2).slideDown('slow');
	}
};


in html is "onclick":

onclick="divSwap('div_mydiv', 'div_mydiv_edit');"


Iemand die mij op weg kan helpen? Alvast bedankt!
@Frank Nietbelangrijk,

Dank je voor je antwoord en moeite. Het komt aardig in de buurt, maar dat 'click' function, zoals je het gedaan hebt op deze manier is juist de reden waarom ik function() wilt aanmaken op basis van onclick.

Als je bijv op deze

onclick="divSwap('div_mydiv', 'div_mydiv_edit');"


klikt in (onclick zit overigens in a href), dan komt er nieuwe div met nieuw a href waar het dan weer zo staat:

onclick="divSwap('div_mydiv_edit', 'div_mydiv');"


En als je op de laatste hierboven klikt, gaat hij dus weer terug naar de eerste onclick hierboven.

Kleine Voorbeeld html wat jquery moet handelen:

<div id="div_mydiv" style="display: block;"> < -- is zichtbaar
content....... blaah blaah
<a href="" onclick="divSwap('div_mydiv', 'div_mydiv_edit');">Bewerken</a> <-- Als erop geklikt wordt verdwijnt #div_mydiv en gaat ie naar #my_mydiv_edit

// div_mydiv_edit is niet zichtbaar zolang div_mydiv zichtbaar is en niet geklikt is op onclick="divSwap('div_mydiv', 'div_mydiv_edit');"

<div id="div_mydiv_edit" style="display: none;">
content..... blaah blaah
<a href="" onclick="divSwap('div_mydiv_edit', 'div_mydiv');">Sluiten</a> <-- Als erop geklikt wordt verdwijnt #div_mydiv_edit en gaat ie weer terug naar #my_mydiv
</div>
[code lang="js"]
<div id="div_mydiv" style="display: block;">
<a href="" class="toggle" data_show="#div_mydiv_edit">Bewerken</a>
</div>
<div id="div_mydiv_edit" style="display: block;">
<a href="" class="toggle" data-show="#div_mydiv">Bewerken</a>
</div>
<script type="text/javascript">
$(".toggle").on("click", function(e) {
e.preventDefault();
$($(this).data("show")).slideUp("fast");
$(this).parent().slideDown("slow");
});
</script>
[/code]
@Ger van Steenderen

Bedankt voor je antwoord en moeite, maar hij pakt hem niet en bovendien kan je niet op 1 class of id gaan bouwen, omdat er meerdere div's zijn met verschillende id's, vandaar een function en onclick="".
@Frank Nietbelangrijk

Bedankt voor je moeite en ik waardeer je hulp!! Met beetje aanpassingen heb ik hem precies kunnen krijgen, zoals ik het wilt. Hopelijk was dit ook een beetje uitdaging voor jou!
ha nee niet echt een uitdaging meer vrees ik, maar graag gedaan hoor.

Reageren