changing click event from h2 to a span

[glennn.php]

i'm not a jquery developer - I'm hoping someone would be kind enough to help me to attach this click event to a span within the h2 instead of the entire h2 heading:

 

$(function(){
$('.dragbox')
.each(function(){
	$(this).hover(function(){
		$(this).find('h2').addClass('collapse');
	}, function(){
	$(this).find('h2').removeClass('collapse');
	})
	.find('h2').hover(function(){
		$(this).find('.configure').css('visibility', 'visible');
	}, function(){
		$(this).find('.configure').css('visibility', 'hidden');
	})
	.click(function(){
		$(this).siblings('.dragbox-content').toggle();
		updateWidgetData();
	})
	.end()
	.find('.configure').css('visibility', 'hidden');
});

    
$('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
	start: function(event, ui){
		//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
		/* if($.browser.mozilla || $.browser.safari) 
			$(ui.item).find('.dragbox-content').toggle();
			*/
	},
	stop: function(event, ui){
		ui.item.css({'top':'0','left':'0'}); //Opera fix
	//	if(!$.browser.mozilla && !$.browser.safari)
			updateWidgetData();
	}
})	
.disableSelection();
});

 

<div class="dragbox" id="item12">
<h2><span id="title-12" class="editText">right 2</span><span class="handle" style="float:right; width:49%; height:20px;"></span></h2>
	<div class="dragbox-content" >
		<span id="text-12" class="editText">right</span>
	</div>
</div>

 

thanks very much for anyone's help.

 

GN

 

[AyKay47]

$('.dragbox')
.each(function(){
	$(this).hover(function(){
		$(this).find('h2').addClass('collapse');
	}, function(){
	$(this).find('h2').removeClass('collapse');
	})
	.find('h2').hover(function(){
		$(this).find('.configure').css('visibility', 'visible');
	}, function(){
		$(this).find('.configure').css('visibility', 'hidden');
	})
                .end()
	.find('div.dragbox-content span')
                .click(function(){
		$(this).siblings('.dragbox-content').toggle();
		updateWidgetData();
	})
	.end()
	.find('.configure').css('visibility', 'hidden');
});;

[glennn.php]

thanks, not quite working, tho...

 

i'm trying to attach it to 'h2 span.handle' : <h2> <span class="handle"></span></h2>

 

here:

 

http://cssphpmysql.com/dev/mylifeline/

 

 

 

[AyKay47]

Oh, i wasn't sure which span you wanted it attached to.

 

$('.dragbox')
.each(function(){
	$(this).hover(function(){
		$(this).find('h2').addClass('collapse');
	}, function(){
	$(this).find('h2').removeClass('collapse');
	})
	.find('h2').hover(function(){
		$(this).find('.configure').css('visibility', 'visible');
	}, function(){
		$(this).find('.configure').css('visibility', 'hidden');
	})
                .end()
	.find('span.handle')
                .click(function(){
		$(this).children('.dragbox-content').toggle();
		updateWidgetData();
	})
	.end()
	.find('.configure').css('visibility', 'hidden');
});;

[glennn.php]

nope - i'd even tried that earlier...

 

this is the upateWidgetData function that's called - it's getting this far: $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); but it's not toggling the .dragbox-content div...

 

function updateWidgetData(){
var items=[];
$('.column').each(function(){
	var columnId=$(this).attr('id');
	$('.dragbox', this).each(function(i){
		var collapsed=0;
		if($(this).find('.dragbox-content').css('display')=="none")
			collapsed=1;
		var item={
			id: $(this).attr('id'),
			collapsed: collapsed,
			order : i,
			column: columnId
		};
		items.push(item);
	});
});
var sortorder={ items: items };

//Pass sortorder variable to server using ajax to save state
$.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){
	if(response=="success")
		$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
	setTimeout(function(){
		$('#console').fadeOut(1000);
	}, 2000);
});
}

 

 

 

Oh, i wasn't sure which span you wanted it attached to.

 

$('.dragbox')
.each(function(){
	$(this).hover(function(){
		$(this).find('h2').addClass('collapse');
	}, function(){
	$(this).find('h2').removeClass('collapse');
	})
	.find('h2').hover(function(){
		$(this).find('.configure').css('visibility', 'visible');
	}, function(){
		$(this).find('.configure').css('visibility', 'hidden');
	})
                .end()
	.find('span.handle')
                .click(function(){
		$(this).children('.dragbox-content').toggle();
		updateWidgetData();
	})
	.end()
	.find('.configure').css('visibility', 'hidden');
});;

[AyKay47]

In the click function, change children() back to siblings()