Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Have a problem with javascript functions in handling an accordion

    Hey everyone, please i'd have this issue, i have this accordion which i use it in drupal, the problem is that it opens the first 10 tabs and not the other ones, here is the code which i think needs some work:

    function wysiwyg_tools_plus_theme_toggleAccordionContent(eventId) {
    eventId = eventId.substring(eventId.length-1, eventId.length);
    $('#acc-' + eventId).toggle('fast');

    In this example it opens only the first 10 items of accordion
    When i change it into :

    function wysiwyg_tools_plus_theme_toggleAccordionContent(eventId) {
    eventId = eventId.substring(eventId.length-2, eventId.length);
    $('#acc-' + eventId).toggle('fast');

    it now opens only the 10 second items of the accordion:

    Here is where i've implemented it: http://www.plus-demo.info/drupal/biz...jeti-zona-plus

    Please help me with this...

    the whole code is :

    Code:
    (function ($){
    	
    	Drupal.behaviors.wysiwyg_tools_plus_theme_createTabs = {
    		attach:function (context) {
    			//tabbed elements first
    			// for each of the div's apply an id to each
    			$('.ready-tabber', context).each(function (index) {
    
    				// a couple of opening set-ups for first run.
    				if (index == 0) {
    					//create the ul that our headers can be added to for the tabs row plus id's to link to content
    					$(this).before('<ul class="ready-tabs"></ul>');
    				}
    				// add an indexed id to the div
    				$(this).attr('id', 'content-' + index);
    
    				//wrap the tab header as an anchor and li
    				$(this).children('.ready-tabber-header').wrap('<li class="ready-tab"><a id="tab-' + index + '" href="javascript:void(0);"></a></li>');
    
    				// move the header element to the ul as a li
    				$(this).children('li').appendTo('ul.ready-tabs');
    			});
    			$('.ready-tabs', context).after('<br clear="all" />');
    		}
    	}
    	
    	Drupal.behaviors.wysiwyg_tools_plus_theme_createAccordions = {
    		attach:function (context) {
    			$('.ready-accordion').each(function (index) {
    				$(this).attr('id', 'acc-' + index);
    				$(this).children('.ready-accordion-header').wrap('<a class="acc-head" id="acc-head-' + index + '" href="javascript:void(0);"></a>');
    				$(this).children('a').insertBefore(jQuery(this));
    
            // awful hack: apply .last to the accordion heads which appear to be last
            if ($(this).next().length == 0 || !$(this).next().hasClass("ready-accordion")) {
              $(this).prev().addClass("last");
            }
    			});
    
    		}
    	}
    	
    	Drupal.behaviors.wysiwyg_tools_plus_theme_initPage = {
    		attach:function (context) {
    			$('.ready-accordion', context).hide();
    			$('.acc-head', context).children('span').addClass('collapsed');
    			// set the click events
    			$('.ready-tabs a', context).click(function (event) {
    				idClicked = this.id;
    				wysiwyg_tools_plus_theme_toggleTabContent(idClicked);
    			});
    
    			$('.acc-head', context).click(function (event) {
    				idClicked = this.id;
    				wysiwyg_tools_plus_theme_toggleAccordionContent(idClicked);
    
            // attach an active class to active accordion heads
            if ($(this).children('span').hasClass("expanded")) {
              $(this).children('span').removeClass("expanded");
    					$(this).children('span').addClass("collapsed");
            } else {
              $(this).children('span').addClass("expanded");
    					$(this).children('span').removeClass("collapsed");
            }
    
    			});
    			wysiwyg_tools_plus_theme_toggleTabContent('tab-0');
    		}
    	}	
    	
    	/**
    	 * Toggle the visibility of the tab content and set active link
    	 */
    	function wysiwyg_tools_plus_theme_toggleTabContent (eventId) {
    		eventId = eventId.substring(eventId.length-1, eventId.length);
    		$('.ready-tabber').each(function (index) {
    			if (this.id == "content-" + eventId) {
    				// set the link as active
    				$('.ready-tabs #tab-' + eventId).parent('li').addClass('active');
    				// expose active content
    				$(this).show();
    			}
    			else {
    				//unset active class from non-event links
    				$('.ready-tabs #tab-' + index).parent('li').removeClass('active');
    				//hide unactive content
    				$(this).hide();
    			}
    		});
    	}
    	
    	/**
    	 * Toggle the visibility of the accordion content
    	 */
    	function wysiwyg_tools_plus_theme_toggleAccordionContent(eventId) {
    		eventId = eventId.substring(eventId.length-1, eventId.length);
    		$('#acc-' + eventId).toggle('fast');
    	}
    	
    }(jQuery));
    Last edited by VIPStephan; 12-13-2011 at 01:52 PM. Reason: wrapped code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    In future, please put the code you post in between [CODE][/CODE] tags (e. g. by highlighting it and clicking the small ‘#’ button in the reply window). This makes it a lot easier to scan your post.

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, England
    Posts
    63
    Thanks
    1
    Thanked 14 Times in 14 Posts
    You could have addressed this all in one thread.

    Worth merging:

    http://www.codingforums.com/showthread.php?p=1170134
    //Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//


  •  

    Posting Permissions

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