StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Opening modules</h2> <p>For the sidebar links -> content relation, use rel tags in sidebar that correspond to the main content's divs' ID's, like this:</p> <pre><code><ul id="sidebar"> <li><a href="#" rel="tab_1">Open tab 1</a></li> <li><a href="#" rel="tab_2">Open tab 2</a></li> <li><a href="#" rel="tab_3">Open tab 3</a></li> </ul> ... <div id="content"> <div class="module" id="tab_1"> ... </div> <div class="module" id="tab_2"> ... </div> <div class="module" id="tab_3"> ... </div> </div> </code></pre> <p>And then in jQuery, the change of tab is easy to implement:</p> <pre><code>$('#sidebar a').click(function() { $('#content div.module').hide(); $('#content div#'+$(this).attr('rel')).show(); return false; }); </code></pre> <h2>Module headers</h2> <p>If you want to have the headers of the modules to be visible always, you can do something like this:</p> <pre><code><div id="content"> <div class="module" id="tab_1"> <h2>Module header</h2> <p class="module_tools"> <a href="#" class="module_hide">Hide</a> <a href="#" class="module_show">Show</a> </p> <div class="module_contents"> ... </code></pre> <p>And in jQuery:</p> <pre><code>$('#sidebar a').click(function() { var $visible_module = $('#content div#'+$(this).attr('rel')); $('#content div.module div.module_contents').hide(); $('#content div.module div.module_contents a.module_hide').hide(); $('#content div.module div.module_contents a.module_show').show(); $visible_module.find('div.module_contents').show(); $visible_module.find('a.module_hide').show(); $visible_module.find('a.module_show').hide(); return false; }); </code></pre> <h2>Module show and hide</h2> <p>Then, to implement the show buttons in modules, I would 'cheat' and have them press the corresponding button in sidebar.</p> <pre><code>$('#content .module_show').click(function() { $('#sidebar a[rel='+$(this).closest('div.module').attr('id')).click(); return false; }); </code></pre> <p>The hide button is easy to implement: </p> <pre><code>$('#content .module_hide').click(function() { $(this).closest('div.module').find('div.module_contents').hide(); return false; }); </code></pre> <h2>Locked modules</h2> <p>And last thing is to implement the 'locked' feature. For that, I would just add a class to the sidebar's links that tells the current tab is inactive and then modify the modules according to that:</p> <pre><code><ul id="sidebar"> <li><a href="#" rel="tab_1">Open tab 1</a></li> <li><a href="#" rel="tab_2" class="inactive">Open tab 2</a></li> </code></pre> <p>And in jQuery:</p> <pre><code>$('#sidebar a.inactive').each(function() { var $target_module = $('#content div#'+$(this).attr('rel')); // Remove the links alltogether $target_module.find('.module_hide, .module_show').remove(); return false; }); </code></pre> <p>And the sidebar's links' click event must be modified also:</p> <pre><code>$('#sidebar a').click(function() { if($(this).hasClass('inactive')) return false; ... </code></pre> <p>That covers all the bases not including the cookie save. Hope this gives you some pointers on how you can simplify your code. Note that I haven't tested any of this, so I cannot guarantee it works. Feel free to ask if you don't understand something.</p> <p>Be sure to use CSS styling to set the initial state of your application, for example hiding all the 'hide' links and .module_contents from modules, as they probably are closed by default.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload