Opening tabs and linking to sections within show/hide. desperate, will pay!

Opening tabs and linking to sections within show/hide. desperate, will pay!

1. I am trying to figure out how to open a tab, open a show/hide within that tab, and link to a particular person from an incoming link.
2. I also am trying to figure out how to open a tab and then a pane within that tab from an incoming link.

This is the page I am working with

I realize this is a lot to ask. My co-worker and I are at the end of our rope and would happily pay someone to help us. You can reply here or email me directly at: anna.callahan {at} 4culture {dot} org.
If there is a different forum for posting paying jobs, please direct me to the right place.

Thanks!
anna (with fingers crossed)


This is the code used for the tabs

  1. <script type="text/javascript">
    $(document).ready(function() {
      $("ul.main.tabs").tabs("div.main.panes > div", {tabs: 'a.main', history: true });
     
      $("ul.nested.tabs").tabs("div.nested.panes > div", {tabs: 'a.nested', history: true });
    });
    </script>







This is the code used for the toggle

  1. <script type="text/javascript">
    // Andy Langton's show/hide/mini-accordion - updated 23/11/2009
    // Latest version @ http://andylangton.co.uk/jquery-show-hide
    $(document).ready(function() {
    var showText='+/-';
    var hideText='+/-';
    var is_visible = false;
        $('.toggle').prev().append(' <a href="#" class="toggleleader">'+'+/-'+'</a>');
        $('.toggle').hide();
        $('a.toggleleader').click(function() {
            is_visible = !is_visible;
                $(this).html((!is_visible) ? showText : '+/-');
                $(this).parent().next('.toggle').toggle('fast');
        return false;});
    });
    </script>
















This is the menu used to create the tabs

  1.   <div id="tabsection">
             <ul class="tabs main">
                <li><a href="#board" class="main">Board</a></li>
                <li><a href="#advisory" class="main">Advisory Committees</a></li>
                <li><a href="#staff" class="main">Staff</a></li>
                <li><a href="#schedule" class="main">Meeting Schedule</a></li>
        </ul>
        </div>









This is a section of the page for problem #1.  I want to open the tab and link to Alka.

  1. <!--PANE 1 ////////////////////////////////////////////////////////////////-->
    <div class="panes main">
    <div>
      <div class="panes_nested">
        <div>
          <div id="accordion_1">
              <h2>About our Board</h2>
                <div class="pane">
                  <h3 class="titletopspace">Board Members</h3>
                      <div class="toggle">
                        <p class="clear">&nbsp;</p>
                        <ul class="bio">
                              <li><strong>Alka Badshah</strong></li>
                        </ul>
                        <p class="bio_text">Alka trained as an architect and went on to pursue a career in IT, building and managing User Interface Design.</p>
                      </div>
                   </div>
          </div>
          <div class="clear"></div>
          <!-- activate accordian 1 -->
           <script type="text/javascript">
                            $(function() {

                                $("#accordion_1").tabs("#accordion_1 div.pane", {tabs: 'h2', effect: 'slide', history: true });
                            });
            </script>
        </div>
      </div>
    </div>
    </div>































This is a section of the page for problem #2. I want to open the tab and then open the public art advisory committee pane. (And if possible link to an anchor in that section)


  1.     <div class="panes_4 main">
          <div>
            <div id="accordion_4">
              <h2>Preservation Advisory Committee</h2>
                  <div class="pane">
                    <p>The Preservation Advisory Committee</p>
                  </div>
              <h2>Public Art Advisory Committee</h2>
                  <div class="pane">
                    <p>For more information</p>
                  </div>
            </div>
          </div>
          <div class="clear"></div>
          <!-- activate accordian 2 -->
          <script type="text/javascript">
                    $(function() {

                        $("#accordion_4").tabs("#accordion_4 div.pane", {tabs: 'h2', effect: 'slide', history: true });
                    });
        </script>
        </div>