SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Many comments in one toggle?

    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.

    3.png

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

    2.png

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

    3.png

    This is my HTML:

    HTML Code:
    <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

    Code:
    <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
    Attached Images Attached Images
    • File Type: png 1.png (2.2 KB, 3 views)

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,258
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    I'm not sure if your problem is a "toggle" problem but if it is here's this.

    Quote Originally Posted by Mittineague View Post
    Maybe this old jQuery code will help as a start? It works with unlimited "child nodes".
    Code JavaScript:
    $("<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();
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •