Hallo ik zit met een klein probleem met jQuery.
Dit gebruik ik op mijn site

Code:

<div class="menuitem">
<div class="kop">
	<h1>Homepagina</h1>
<a href="#"><img src="images/button.png" alt="button" /></a>
					
<ul>
<li>Homepagina</li>
<li>Contact</li>
			<li>Fotoalbum</li>
		</ul>
	</div>
</div>

En nu wil ik dmv javascript door op die link met alt button te klikken dat de ul in en uit flapt.

Code:

	$(".menuitem ul").hide();
	$(".kop a").click(function(){
		if($(this).hasClass("show"))
		{
			$(this).removeClass("show");
			$(this).next("ul").slideUp();
		}
		else
		{
			$(this).addClass("show");
			$(this).next("ul").slideDown();
		}
		return false;
	});

Alleen .menuitem ul staat niet in de div waar de inklapbutton staat.

Dus als ik nu op de inklapbutton druk gebeurt er niets. Maar als ik </div> na de ul doe dan werkt het wel, maar ziet de hele layout er vreemd uit.

Hoop dat het zo duidelijk is.

Mathijs

Waar staat het list-item (ul) dan wel, want dit is gissen voor ons? (ik zie namelijk nergens een <ul> element staan.

(en enters in je code zou ook fijn zijn)

Edit: Oh, nu zie ik 'm pas. En ik zie dat je weinig kan doen aan de code opmaak, want Sitedeals vernaggeld de hele opmaak (enters verdwijnen zomaar)

Dit werkt bij mij gewoon goed (en het klopt ook nog eens):

Code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	
	$(".menuitem ul").hide();	
	$(".kop a").click(function(){		
		if($(this).hasClass("show")) {
			$(this).removeClass("show");
			$(this).next("ul").slideUp();
		} else {
			$(this).addClass("show");
			$(this).next("ul").slideDown();		
		}
	return false;
	});
	
});
</script>
<div class="menuitem">
<div class="kop">	
<h1>Homepagina</h1>
<a href="#"><img src="images/button.png" alt="button" /></a>
<ul>
<li>Homepagina</li>
<li>Contact</li>
<li>Fotoalbum</li>
</ul>
</div>
</div>

Bedankt, op een of andere manier werkt het nu wel.
Is er ook een mogelijkheid om het plaatje dan te laten veranderen in plaatje met bijvoorbeeld een open pijltje. Momenteel is het een dicht pijltje.

Niet getest, maar zoiets (even zonder code tags, want dat gaat hier niet helemaal goed geloof ik):

$(function(){
$(".menuitem ul").hide();
$(".kop a").click(function(){
if($(this).hasClass("show")) {

$(this).removeClass("show");
$(this).next("ul").slideUp();

$('img',this).attr('src','pijlup.jpg');

} else {

$(this).addClass("show");
$(this).next("ul").slideDown();

$('img',this).attr('src','pijldown.jpg');

}
return false;
});
});