jQuery Sliding Menu Modification - new problem

[urbanbutterfly]

Evening folks,

Have just discovered jQuery and have implemented a sliding menu on my new personal site that's currently in development.

The menu works brilliantly, no issues at all, but I'm wondering how I'd go about making one slight modification.

// jQuery Menu
$(document).ready(function(){

	// Set default menu states	
	expanded = $('li.expanded > h1');
	expanded.css('cursor', 'pointer');
	jQuery.each(expanded, function(){
		$(this).text('- ' + $(this).text());
	});
	collapsed = $('li.collapsed > h1');
	collapsed.css('cursor', 'pointer').next('ul').css('display', 'none');
	jQuery.each(collapsed, function(){
		$(this).text('+ ' + $(this).text());
	});
	
	// Switch menu states when the menu headers are clicked
	$('li.toggleable > h1').click(function(){
		menu_header = $(this);
		menu_header.next('ul').slideToggle('normal');
		if (menu_header.text().substring(0, 2) == '+ ')
			menu_header.text('- ' + menu_header.text().substring(2));
		else if (menu_header.text().substring(0, 2) == '- ')
			menu_header.text('+ ' + menu_header.text().substring(2));
	});

});

What I want to modify is the + it adds to collapsed parts of the menu and the - it adds to the expanded parts of the menu. Instead of the + and - I'd like to have an image instead.

Any advice how I go about changing the code to do this?

As always, thanks in advance :-)

[Fumigator]

Simply insert your <img> tags in place of the "-" and "+".

[urbanbutterfly]

Thanks for the reply, this is what I thought I could do, but it actually prints the <img> tag as text instead of interpreting the HTML.

Am I missing something blindingly obvious? I know the answer's probably yes, but be gentle anyway

[urbanbutterfly]

Have managed to resolve this now.

Have cottoned on that $(this).text('- ' etc should be $(this).html('- ' and it didn't help I was referencing my image by the wrong filename

D'oh.

[urbanbutterfly]

Further to this, I've noticed since I've made these changes, the images no longer swap when the menu headers are toggled. Can anyone shed any light as to where I've made a mistake in my code?

Thanks in advance.

// jQuery Menu
$(document).ready(function(){

	// Set default menu states	
	expanded = $('li.expanded > h1');
	expanded.css('cursor', 'pointer');
	jQuery.each(expanded, function(){
		$(this).html('<img src="images/up.gif" />' + $(this).html());
	});
	collapsed = $('li.collapsed > h1');
	collapsed.css('cursor', 'pointer').next('ul').css('display', 'none');
	jQuery.each(collapsed, function(){
		$(this).html('<img src="images/down.gif" />' + $(this).html());
	});
	
	// Switch menu states when the menu headers are clicked
	$('li.toggleable > h1').click(function(){
		menu_header = $(this);
		menu_header.next('ul').slideToggle('normal');
		if (menu_header.html().substring(0, 2) == '<img src="images/down.gif" />')
			menu_header.html('<img src="images/up.gif" />' + menu_header.html().substring(2));
		else if (menu_header.html().substring(0, 2) == '<img src="images/up.gif" />')
			menu_header.html('<img src="images/down.gif" />' + menu_header.html().substring(2));
	});

});