Many comments in one toggle?

[romin]

Hey I am new to Jquery, I need some help, I wanted to create a slide down comments feature for each news feed, a bit like facebook.

However I can’t manage to get it working. I am using slice to make it work.

If I click load comments I get anohter comment loading like so:

However when I click load comments for the second section for some reason all the comments load up, when I just wanted one:

This is my HTML:

<a href="javascript:slideonlyone('newboxes1');" >Load Comments</a>
<div class="comment" id="newboxes1">Comment one</div>
 <div class="comment" id="newboxes1">Comment two</div>


<a href="javascript:slideonlyone('newboxes2');" >Load Comments</a>
<div class="comment" id="newboxes2">help me</div>
<div class="comment" id="newboxes2">Comment two</div>

This is my Jquery

<script>
$(".comment").hide();
$(".comment").slice(0, 1).show();

function slideonlyone(thechosenone) {

        $('.comment').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown("slow");
          }

     });
}
</script>

I cant manage to solve this, I really need help. If you have any idea or even a tutorial that you know, please help.
Thank you
Romin

[Mittineague]

I’m not sure if your problem is a “toggle” problem but if it is here’s this.

@Mittineague

Maybe this old jQuery code will help as a start? It works with unlimited “child nodes”.

$("<parent node selector here>").toggle(
	function () {
		$(this).css({"color":"#fff", 
					"background-image":"url(./includes/plus-8.png)", 
					"background-repeat": "no-repeat", 
					"line-height": "8px"});
		$(this.childNodes).css({"display":"none"});
	},
	function () {
		$(this).css({"color":"#000", 
					"background-image":"url(./includes/minus-8.png)", 
					"background-repeat": "no-repeat", 
					"line-height": "normal"});
		$(this.childNodes).css({"display":"inline"});
	}
);function init(){
	$("#toggle_ctrl").text('<expand all button text here>');
	$("#toggle_ctrl").css({"display":"block"});
	$("#toggle_ctrl").toggle(
		function(){
			$("#toggle_ctrl").text('<close all button text here>');
			$("<parent node selector here>").each( function() {
				if ( $(this).css('line-height') == '8px' )
				{
					$(this).trigger('click');
				}
			});
			$("<parent node selector here>").css({"color":"#000", 
										"background-image":"url(./includes/minus-8.png)", 
										"background-repeat": "no-repeat", 
										"line-height": "normal"});
		},
		function () {
			$("#toggle_ctrl").text('<expand all button text here>');
			$("<parent node selector here>").each( function() {
				if ( $(this).css('line-height') == 'normal' )
				{
					$(this).trigger('click');
				}
			});
			$("<parent node selector here>").css({"color":"#fff", 
										"background-image":"url(./includes/plus-8.png)", 
										"background-repeat": "no-repeat", 
										"line-height": "8px"});
		} 
	);
	$("<parent node selector here>").trigger('click');
}
$(document).ready(function() {
	init();
});