CODEWITHSUNDEEP
jqueryhtmljquery-ui-accordion
robertmegone
robertmegone

Reputation: 65

Re-open jQuery accordion on previous section after page loads

I coded my own Jquery accordion and I have a problem.

I need to open the current section again after following the link.

When I click a link some database code fetches the correct data and displays it however since the page has re-loaded the previously open accordion section is now closed.

Does anybody have any recommendations for making use of the '$accordionPrev' value? I tried accessing this var but any requests to make it visible were not working.

I would be very grateful for any help, I have been fighting this all day :)

Many thanks

Robert

Jquery:

var $runAccordionOnce = 0; var $accordionPrev;


$(".sidebar_game_header").click(function(){
              if($runAccordionOnce > 0) {

              $accordionPrev.slideUp('normal');
              $accordionPrev.prev().css({'background-position' : 'top left'});

              }


    if($(this).next().is(":hidden")){
              $accordionPrev = $(this).next();
              $(this).next().slideDown('normal');   
              $(this).css({'background-position' : 'bottom left'});
              $runAccordionOnce++;    
    }

HTML Sample:

<div class="sidebar_game_content_wrapper"><div class="sidebar_game_onepix"></div>
    <div class="sidebar_game_header"><img src="<?php bloginfo('template_directory'); ?>/images/icn_game1.png" alt="Game 1 Icon"/><div class="sidebar_game_header_text">Game 1</div></div>
    <div class="sidebar_game_content"> 

        <ul>
            <li><a href="<?php {echo $url . "&amp;game_id=10&amp;platform_id=3";} ?>">iPhone</a></li>
            <hr />
            <li><a href="<?php {echo $url . "&amp;game_id=10&amp;platform_id=4";} ?>">iPad</a></li>
            <hr />
            <li><a href="<?php {echo $url . "&amp;game_id=10&amp;platform_id=2";} ?>">Mac</a></li>
            <hr />
            <li><a href="<?php {echo $url . "&amp;game_id=10&amp;platform_id=1";} ?>">PC</a></li>
        </ul>
    </div>
</div>
<div class="sidebar_game_content_wrapper"><div class="sidebar_game_onepix"></div>
    <div class="sidebar_game_header"><img src="<?php bloginfo('template_directory'); ?>/images/icn_game2.png" alt="Game 2 Icon"/><div class="sidebar_game_header_text">Game 2</div></div>
    <div class="sidebar_game_content">      
    <ul>
            <li><a href="<?php {echo $url . "&amp;game_id=9&amp;platform_id=3";} ?>">iOS</a></li>
            <hr />
             <li><a href="<?php {echo $url . "&amp;game_id=9&amp;platform_id=2";} ?>">Mac</a></li>
            <hr /> 
            <li><a href="<?php {echo $url . "&amp;game_id=9&amp;platform_id=1";} ?>">PC</a></li>
            <hr /> 
            <li><a href="<?php {echo $url . "&amp;game_id=9&amp;platform_id=6";} ?>">Nintendo DS</a></li>
            <hr /> 
            <li><a href="<?php {echo $url . "&amp;game_id=9&amp;platform_id=5";} ?>">Nintendo Wii</a></li>
            <hr /> 
    </ul>
    </div>

Upvotes: 0

Views: 424

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Javascript variables do not persist between page re-loads.

You will have to either

  • pass it in the url (and read it when the page is loaded again)

or

  • save it in a cookie and access it from the new page.

Upvotes: 2

Nrj
Nrj

Reputation: 6831

You can submit the current accordion section value which is open when you click the link and subsequently readit from request when you load the page (in js). By default (for the first page load), the default value can signify that you need to load the first section.

You might need to manipulate the css manually when you open a particular section manually via script.

Upvotes: 0

Related Questions