SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast seezee's Avatar
    Join Date
    Jun 2010
    Location
    Oklahoma, USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting 2nd click to close accordion element

    I've modified the Filament Group's jQuery Collapsible plugin so it would close any open elements when an new one is clicked to open. I'm using this plugin instead of the standard jQuery accordion because of how it handles accessibility issues.

    But now, when a user clicks an already 'open' element to close it, the element closes momentarily & then opens again. Not the desired behavior. It appears that the 'else' statement that handles this is being incorrectly interpreted (or rather, I'm passing the wrong data).

    here's the section of the code before modification:
    Code:
    //events
    collapsibleHeading	
    	.bind('collapse', function(){
    		$(this)
    			.addClass('collapsible-heading-collapsed')
    			.find('.collapsible-heading-status').text('Show ');
    								
    		collapsibleContent.slideUp(function(){
    			$(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true);
    		});
    	})
    	.bind('expand', function(){
    		$(this)
    			.removeClass('collapsible-heading-collapsed')
    			.find('.collapsible-heading-status').text('Hide ');
    								
    		collapsibleContent
    			.slideDown(function(){
    				$(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false);
    			});
    	})
    	.click(function(){ 
    		if( $(this).is('.collapsible-heading-collapsed') ){
    			$(this).trigger('expand'); 
    		}	
    		else {
    			$(this).trigger('collapse'); 
    		}
    		return false;
    	})
    	.trigger('collapse');
    and after:
    Code:
    //events
    collapsibleHeading	
    	.bind('collapse', function(){
    		$(this)
    			.addClass('collapsible-heading-collapsed')
    			.find('.collapsible-heading-status').text('Show ');
    								
    		collapsibleContent.slideUp(function(){
    			$(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true);
    		});
    	})
    	.bind('expand', function(){
    		$(this)
    			.removeClass('collapsible-heading-collapsed')
    			.find('.collapsible-heading-status').text('Hide ');
    								
    		collapsibleContent
    			.slideDown(function(){
    				$(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false);
    			});
    	})
    	.click(function(){ //next 3 lines added by me to close expanded item when new item selected
    		var collapseAll = $('.collapsible-heading');
    		for (var i = 0; i < collapseAll.length; i++);
    		collapseAll.trigger('collapse');
    		{
    			if( $(this).is('.collapsible-heading-collapsed') ){
    				$(this).trigger('expand'); 
    			}	
    			else {
    				$(this).trigger('collapse'); 
    			}
    			return false;
    		}
    	})
    	.trigger('collapse');
    and the html:
    HTML Code:
      <div id="faq">
        <h5 class="accordion">Details</h5>
        <ul>
          <li>purple-flower.tif purple-flower.tif purple-flower.tif</li>
          <li>flower-photos.zip flower-photos.zip flower-photos.zip</li>
        </ul>
        <h5 class="accordion">Details 2</h5>
        <ul>
          <li>purple-flower.tif</li>
          <li>flower-photos.zip</li>
        </ul>
        <h5 class="accordion">Details 3</h5>
        <ul>
          <li>purple-flower.tif</li>
          <li>flower-photos.zip</li>
        </ul>
      </div>
    I know, why haven't I asked this on the jQuery forum? I have, but the fact is, you guys are much more responsive & helpful.

    Oh yeah, here's the page where I'm trying to get this to work.

    Thanks,

    --cz

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I can't read jQuery, but there was an accordion script written in the JSLIve course. What they did there was make a collapseAll function, which was only called from inside the expand function.

    So collapseAll had its own loop through all the elements and applied the collapse function to everything it looped though, and expand would first call collapseAll before doing what it did (in this case, they used both a class for collapse and a class for expand, instead of just adding and removing a collapse class).

    If this makes sense as straight JS, it looks like this:
    (html has a single ul with a class of "accordion" with the headers inside the li's... and the li's are getting the expand/collapsed classes... main Object is called Accordion):
    Code:
    collapse: function(fold) {
      //removes class of expanded;
      //adds class of collapsed;
    },
    
    collapseAll: function(accordion) {
      //gets a collection of li's called "folds";
      //loops through the "folds[i]";
      Accordion.collapse(folds[i]);
    },
    
    expand: function(fold) {
      Accordion.collapseAll(fold.parentNode); //everything collapsed now
      //removes class of collapsed on the item clicked;
      //adds class of expanded on the item clicked;
    }
    I think you can do exactly the same thing... so it's just a matter of shuffling your functions around.

  3. #3
    SitePoint Enthusiast seezee's Avatar
    Join Date
    Jun 2010
    Location
    Oklahoma, USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was it -- here's the revised script (affected section only):
    Code:
    .click(function(){
    	if( $(this).is('.collapsible-heading-collapsed') ){
    	//next 3 lines added by me to close expanded item when new item selected
    	var collapseAll = $('.collapsible-heading');
    	for (var i = 0; i < collapseAll.length; i++);
    	collapseAll.trigger('collapse');
    		$(this).trigger('expand'); 
    	}	
    	else {
    		$(this).trigger('collapse'); 
    	}
    	return false;
    })
    .trigger('collapse');
    Thanks for the advice.

    --cz


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
  •