SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to force click on an accordion index (section)

    Hi all,

    I want to bind a click event to a selector which when clicked will open up a given part within an accordion. In the example below I want a link with an id of show-part1 to open up the first section of an accordion. My accordion has four sections. Consequently there are four 'accordion_trigger_index' classes with an index value from 0 to 3.

    The code below triggers but it just kicks me to the top of the page and then back again, as if the $('.accordion_trigger_index').click(function(){}); is firing albeit not interpreting the index value.

    The accordion works fine when clicked on directly. The error must concerning forced a click event while passing the index of which accordion_trigger_index class I want it to trigger (open).

    Any ideas anyone>

    Code JavaScript:
    <script>
    		$('#show-part1').bind('click', function() {
     
    			$('.accordion_trigger_index').trigger('click').index(0);		
     
    		});							
    	 </script>

    Many thanks,

  2. #2
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thus far I found a way to do it as follows:

    Code JavaScript:
    $('.accordion_trigger_index#id-name').trigger('click');

    ...in other words by giving each accordion_trigger_index its own unique ID.

    Still have the problem of it first moving to the top of the screen before moving down and showing the correct open accordion_trigger_index. I found that if I remove the href="" it stops doing this but then the link doesn't appear as a link so I probably now have to do a a:hover with an underline. Seems like a awkward way round...

    Code HTML4Strict:
    <a id="show-part1">SDRAM</a>

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    To stop the default action from occurring when the anchor link is clicked you can use a method called preventDefault() which prevents the href attribute from performing its normal action.

    [CODE=JavaScript]$('#show-part1').bind('click', function(e) {
    e.preventDefault();

    // Normal jQuery code here...
    });[/CODE]
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This method works like a charm, thank you.


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
  •