Databases
StackOverflow2013
Postsdbo
POHow to use jQuery expander and organicTabs both at in a same HTML
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use jQuery expander and organicTabs both at in a same HTML
    primarykey
    data
    text
    <p>This is my HTML</p> <pre><code>&lt;div id="page-wrap"&gt; &lt;div id="tab"&gt; &lt;ul class="nav"&gt; &lt;li class="nav-one"&gt;&lt;a href="#tab1" class="current"&gt;Featured&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-two"&gt;&lt;a href="#tab2"&gt;Core&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-three"&gt;&lt;a href="#tab3"&gt;jQuery&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-four last"&gt;&lt;a href="#tab4"&gt;Classics&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="list-wrap"&gt; &lt;div id="tab1"&gt; &lt;div class="readmore"&gt;Nam tincidunt tempus justo sed aliquam. Sed rhoncus, augue at hendrerit semper, lectus leo varius ndivla, sit amet laoreet sem quam in ipsum. Aenean eget nunc a arcu ornare consequat. Mauris arcu elit, dictum sed aliquet sed, blandit vel arcu. Aliquam id ligdiva justo. Donec et magna id risus hendrerit mattis vitae sed leo. Donec molestie condimentum venenatis. In imperdiet, diam vel vehicdiva fringilla, dolor massa condimentum dolor, ac consequat dui augue sit amet ndivla. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivla facilisi. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivlam quis porttitor risus. Vestibdivum felis elit, accumsan non divtrices vel, posuere at mi. Integer mollis turpis vitae magna aliquet tincidunt. Donec nec diam eu odio venenatis faucibus. Donec convallis placerat mauris vitae vdivputate. &lt;/div&gt; &lt;/div&gt; &lt;div id="tab2" class="hide"&gt; &lt;div class="readmore"&gt;Sed interdum sem id sem ultrices eget tempus sem rhoncus. In ullamcorper elit at tellus cursus vestibulum mattis lacus vulputate. Etiam elit mi, sagittis ut feugiat vitae, suscipit eu nisl. Praesent bibendum tortor quis felis iaculis ac ullamcorper felis vehicula. Nam vitae sem ante, eu consequat nunc. Maecenas et mattis tellus. Vestibulum lacinia mauris eu nulla rutrum interdum. Fusce imperdiet leo ut tortor dapibus id mattis magna elementum. Sed vulputate tristique dapibus. Vivamus semper ullamcorper libero, ac bibendum leo vestibulum auctor. Aliquam tellus enim, bibendum at pretium vitae, porta at mauris. Aliquam erat volutpat. Morbi rutrum elementum felis, vel ullamcorper massa semper ullamcorper. Mauris ut velit lectus. &lt;/div&gt; &lt;/div&gt; &lt;div id="tab3" class="hide"&gt; &lt;div class="readmore"&gt;Phasellus porttitor mattis quam, eget sodales sapien cursus et. Etiam elementum volutpat nisi, sit amet hendrerit elit lobortis scelerisque. Donec tincidunt massa nec leo facilisis a sodales risus viverra. Etiam consectetur porttitor adipiscing. Nam id turpis massa. Suspendisse tincidunt, nunc non ultrices consequat, diam erat scelerisque massa, quis porta diam leo in quam. Nam varius, nunc ut luctus viverra, augue leo dapibus risus, et condimentum urna mi vel metus. Quisque pellentesque eleifend eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies vulputate neque eu consequat. Suspendisse vitae felis erat, ultrices sagittis risus. Sed vel nulla tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus urna mauris, volutpat et pharetra id, faucibus eu metus. Vivamus luctus felis in lacus varius non semper turpis ullamcorper. Fusce eleifend mi ut nisl viverra venenatis. &lt;/div&gt; &lt;/div&gt; &lt;div id="tab4" class="hide"&gt; &lt;div class="readmore"&gt;Morbi erat magna, ultricies ac semper ac, ornare et nunc. Etiam et lorem ut eros eleifend dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet sodales dolor. Etiam ut nisl at erat vulputate ultrices. Pellentesque dictum dapibus lectus in laoreet. Vestibulum in velit a lacus varius congue a ut felis. Aliquam consectetur, felis ac porta ultrices, sem ipsum tristique metus, quis feugiat massa neque eget odio. Donec sit amet nunc magna. Vestibulum pulvinar pretium dui ut gravida. Suspendisse potenti. In pharetra rhoncus ipsum vel rhoncus. Nulla ut lacus enim. Ut sit amet enim at neque elementum sollicitudin nec a mi. Praesent ultricies, metus malesuada imperdiet rutrum, sapien est pretium urna, et convallis orci orci vitae erat. Vivamus at ligula lacus, nec consequat nibh. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And this is my jQuery script, where I've tried to use both the pluings at a time in a same div</p> <pre><code>$(document).ready(function() { $(function() { $("#tab").organicTabs({ "speed": 250 }); }); $(".readmore").each(function() { if ($(this).text().length &gt; 200) { $(function() { $('div.readmore').expander({ slicePoint: 200, expandSpeed: 1000, collapseSpeed: 1000, expandText: 'Read More', userCollapseText: 'Hide Text' }); }); } }); }); </code></pre> <p>Using the whole stuff, I'm getting perfect output only for the first tab and that also sometimes.</p> <p>This is a working fiddle example <a href="http://jsfiddle.net/RWnBQ/" rel="nofollow">http://jsfiddle.net/RWnBQ/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USRishi Kulshreshtha
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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