Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I think Tatu posted a wonderful answer. But I worked on some scripting to more closely work with your HTML. I posted a <a href="http://jsbin.com/ugeri/edit#output" rel="nofollow noreferrer">working demo for you here</a>... the extra "} }) " on the right edge only shows up in the bin for some reason (I don't know how to get rid of it).</p> <p>CSS</p> <pre><code>#sidebar-left { float:left; width: 200px; height: 700px; background: #444; padding: 20px; } #main-content { float:left; width: 600px; height: 700px; background: #555; padding: 20px; } .sidebar-menu-1 .selected a { color: #080; } .sidebar-menu-1 .sidebar-menu-locked a { color: #d00; text-decoration: line-through; } .dashboard-module h2 { cursor: pointer; } .dashboard-module { border: #777 1px solid; padding: 5px 15px; margin-bottom: 5px; } .dashboard-module-content {} .limited h2 { text-decoration: line-through; } .expand-collapse { display: none; } .show_btn { background: #08c url(http://i46.tinypic.com/2vd3246.gif) 98% 4px no-repeat; } .hide_btn { background: #080 url(http://i47.tinypic.com/iqadz5.gif) 98% 4px no-repeat; } .limited_btn { background: #d00 url(http://i47.tinypic.com/209ghzp.gif) 98% 4px no-repeat; } </code></pre> <p>HTML (only slightly modified from yours)</p> <pre><code>&lt;!-- S I D E B A R - L E F T --&gt; &lt;div id="sidebar-left"&gt; &lt;ul class="sidebar-menu-1"&gt; &lt;li&gt;&lt;strong&gt;List headline&lt;/strong&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#m1"&gt;Open module 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#m2"&gt;Open module 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#m3"&gt;Open module 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#m4"&gt;Open module 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/sidebar-left--&gt; &lt;!-- M A I N - C O N T E N T --&gt; &lt;div id="main-content"&gt; &lt;!-- dashboard-module --&gt; &lt;div id="m1" class="dashboard-module"&gt; &lt;div class="dashboard-module-content"&gt; &lt;h2&gt;Headline 1&lt;/h2&gt; &lt;p class="teaser"&gt;Teaser-text 1&lt;/p&gt; &lt;div class="expand-collapse"&gt; [some content] &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--/dashboard-module--&gt; &lt;!-- dashboard-module --&gt; &lt;div id="m2" class="dashboard-module"&gt; &lt;div class="dashboard-module-content"&gt; &lt;h2&gt;Headline 2&lt;/h2&gt; &lt;p class="teaser"&gt;Teaser-text 2&lt;/p&gt; &lt;div class="expand-collapse"&gt; [some content] &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--/dashboard-module--&gt; &lt;!-- dashboard-module --&gt; &lt;div id="m3" class="dashboard-module"&gt; &lt;div class="dashboard-module-content"&gt; &lt;h2&gt;Headline 3&lt;/h2&gt; &lt;p class="teaser"&gt;Teaser-text 3&lt;/p&gt; &lt;div class="expand-collapse"&gt; [some content] &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--/dashboard-module--&gt; &lt;!-- dashboard-module --&gt; &lt;div id="m4" class="dashboard-module"&gt; &lt;div class="dashboard-module-content limited"&gt; &lt;h2&gt;Headline 4&lt;/h2&gt; &lt;p class="teaser"&gt;Teaser-text 4&lt;/p&gt; &lt;div class="expand-collapse"&gt; [some content] &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--/dashboard-module--&gt; &lt;/div&gt;&lt;!--/main-content--&gt; </code></pre> <p>Script</p> <pre><code>$(document).ready(function(){ $('.dashboard-module').each(function(){ var mod = $(this); mod.find('h2').addClass('show_btn'); // If the dashboard-module is "limited" do this: if (mod.find('.dashboard-module-content').hasClass('limited')){ $('.sidebar-menu-1').find('a[href$=' + mod.attr('id') + ']').parent().removeClass('selected').addClass('sidebar-menu-locked'); mod.find('.expand-collapse').remove(); mod.find('p:hidden').show(); mod.find('h2').removeClass('show_btn hide_btn').addClass('limited_btn'); }; // Add click to Dashboard Modules mod.find('h2').click(function(){ toggleContent(mod); }) }) // Add click to Side Menu $('.sidebar-menu-1 a').click(function(){ // The dashboard-module ID is contained in the sidebar-menu link href attribute toggleContent( $( $(this).attr('href')) ); return false; }) function toggleContent(mod){ // don't open limited content if (mod.find('.dashboard-module-content').hasClass('limited')) return false; // close open content if (!mod.find('h2').hasClass('hide_btn')){ $('.hide_btn').removeClass('hide_btn').addClass('show_btn').parent().find('.expand-collapse').hide(); $('.sidebar-menu-1 .selected').removeClass('selected'); } var btn = (mod.find('.expand-collapse').toggle().is(':hidden')) ? 'show_btn' : 'hide_btn'; mod.find('h2').removeClass('show_btn hide_btn').addClass(btn); $('.sidebar-menu-1').find('a[href$=' + mod.attr('id') + ']').parent().toggleClass('selected'); } }) </code></pre>
 

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