Databases
StackOverflow2013
Postsdbo
POHow to omit the rest if there are more than 3 of the same div block with the same class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to omit the rest if there are more than 3 of the same div block with the same class
    text
    copied!<p>I want to collapse the rest of div if there are more than 3 with same class, and put show more/less link buttion instead. I am using a custom twitter app with php and json so if anyone have any ideas about how to do so, then please let me know. My code only uses one div and auto populates</p> <p>Code below... </p> <pre><code>$(document).ready(function () { var displaylimit = 12; var twitterprofile = "TWITTERUSERNAME"; var screenname = "SCREENNAME"; var showdirecttweets = true; var showretweets = false; var showtweetlinks = true; var showprofilepic = true; var showtweetactions = true; var showretweetindicator = true; var headerHTML = ''; var loadingHTML = ''; headerHTML += '&lt;a href="https://twitter.com/" target="_blank"&gt;&lt;img src="images/twitter-bird-light.png" width="34" style="float:left;padding:3px 12px 0px 6px" alt="twitter bird" /&gt;&lt;/a&gt;'; headerHTML += '&lt;h1&gt;'+screenname+' &lt;span style="font-size:13px"&gt;&lt;a href="https://twitter.com/'+twitterprofile+'" target="_blank"&gt;@'+twitterprofile+'&lt;/a&gt;&lt;/span&gt;&lt;/h1&gt;'; loadingHTML += '&lt;div id="loading-container"&gt;&lt;img src="images/ajax-loader.gif" width="32" height="32" alt="tweet loader" /&gt;&lt;/div&gt;'; $('#twitter-feed').html(headerHTML + loadingHTML); $.getJSON('http://www.XXXXXXX.com/_newSite/lib/twitter/tweets/tweets.php', function(feeds) { //alert(feeds); var feedHTML = ''; var displayCounter = 1; for (var i=0; i&lt;feeds.length; i++) { var tweetscreenname = feeds[i].user.name; var tweetusername = feeds[i].user.screen_name; var profileimage = feeds[i].user.profile_image_url_https; var status = feeds[i].text; var isaretweet = false; var isdirect = false; var tweetid = feeds[i].id_str; //If the tweet has been retweeted, get the profile pic of the tweeter if(typeof feeds[i].retweeted_status != 'undefined'){ profileimage = feeds[i].retweeted_status.user.profile_image_url_https; tweetscreenname = feeds[i].retweeted_status.user.name; tweetusername = feeds[i].retweeted_status.user.screen_name; tweetid = feeds[i].retweeted_status.id_str; status = feeds[i].retweeted_status.text; isaretweet = true; }; //Check to see if the tweet is a direct message if (feeds[i].text.substr(0,1) == "@") { isdirect = true; } //console.log(feeds[i]); //Generate twitter feed HTML based on selected options if (((showretweets == true) || ((isaretweet == false) &amp;&amp; (showretweets == false))) &amp;&amp; ((showdirecttweets == true) || ((showdirecttweets == false) &amp;&amp; (isdirect == false)))) { if ((feeds[i].text.length &gt; 1) &amp;&amp; (displayCounter &lt;= displaylimit)) { if (showtweetlinks == true) { status = addlinks(status); } if (displayCounter == 1) { feedHTML += headerHTML; } feedHTML += '&lt;div class="twitter-article" id="tw'+displayCounter+'"&gt;'; feedHTML += '&lt;div class="twitter-pic"&gt;&lt;a href="https://twitter.com/'+tweetusername+'" target="_blank"&gt;&lt;img src="'+profileimage+'"images/twitter-feed-icon.png" width="42" height="42" alt="twitter icon" /&gt;&lt;/a&gt;&lt;/div&gt;'; feedHTML += '&lt;div class="twitter-text"&gt;&lt;p class="TwitterName"&gt;&lt;span class="tweetprofilelink"&gt;&lt;strong&gt;&lt;a href="https://twitter.com/'+tweetusername+'" target="_blank"&gt;'+tweetscreenname+'&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;/span&gt;&lt;span class="tweet-time"&gt;&lt;a href="https://twitter.com/'+tweetusername+'/status/'+tweetid+'" target="_blank"&gt;'+relative_time(feeds[i].created_at)+'&lt;/a&gt;&lt;/span&gt;&lt;br/&gt;'+status+'&lt;/p&gt;'; if ((isaretweet == true) &amp;&amp; (showretweetindicator == true)) { feedHTML += '&lt;div id="retweet-indicator"&gt;&lt;/div&gt;'; } if (showtweetactions == true) { feedHTML += '&lt;div id="twitter-actions"&gt;&lt;div class="intent" id="intent-reply"&gt;&lt;a href="https://twitter.com/intent/tweet?in_reply_to='+tweetid+'" title="Reply"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="intent" id="intent-retweet"&gt;&lt;a href="https://twitter.com/intent/retweet?tweet_id='+tweetid+'" title="Retweet"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="intent" id="intent-fave"&gt;&lt;a href="https://twitter.com/intent/favorite?tweet_id='+tweetid+'" title="Favourite"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;'; } feedHTML += '&lt;/div&gt;'; feedHTML += '&lt;/div&gt;'; displayCounter++; } } } $('#twitter-feed').html(feedHTML); //Fix Twitter Spelling and change to true to reinstate animations Add twitter action animation and rollovers if (showtweetactions == flase) { $('.titter-article').hover(function(){ $(this).find('#titter-actions').css({'display':'block', 'opacity':0, 'margin-top':-20}); $(this).find('#titter-actions').animate({'opacity':1, 'margin-top':0},200); }, function() { $(this).find('#titter-actions').animate({'opacity':0, 'margin-top':-20},120, function(){ $(this).css('display', 'none'); }); }); //Add new window for action clicks $('#twitter-actions a').click(function(){ var url = $(this).attr('href'); window.open(url, 'tweet action window', 'width=580,height=500'); return false; }); } }).error(function(jqXHR, textStatus, errorThrown) { var error = ""; if (jqXHR.status === 0) { error = 'Connection problem. Check file path and www vs non-www in getJSON request'; } else if (jqXHR.status == 404) { error = 'Requested page not found. [404]'; } else if (jqXHR.status == 500) { error = 'Internal Server Error [500].'; } else if (exception === 'parsererror') { error = 'Requested JSON parse failed.'; } else if (exception === 'timeout') { error = 'Time out error.'; } else if (exception === 'abort') { error = 'Ajax request aborted.'; } else { error = 'Uncaught Error.\n' + jqXHR.responseText; } alert("error: " + error); }); //Function modified from Stack Overflow function addlinks(data) { //Add link to all http:// links within tweets data = data.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\&lt;\&gt;]*[^.,;'"&gt;\:\s\&lt;\&gt;\)\]\!])/g, function(url) { return '&lt;a href="'+url+'" target="_blank"&gt;'+url+'&lt;/a&gt;'; }); //Add link to @usernames used within tweets data = data.replace(/\B@([_a-z0-9]+)/ig, function(reply) { return '&lt;a href="http://twitter.com/'+reply.substring(1)+'" style="font-weight:lighter;" target="_blank"&gt;'+reply.charAt(0)+reply.substring(1)+'&lt;/a&gt;'; }); //Add link to #hastags used within tweets data = data.replace(/\B#([_a-z0-9]+)/ig, function(reply) { return '&lt;a href="https://twitter.com/search?q='+reply.substring(1)+'" style="font-weight:lighter;" target="_blank"&gt;'+reply.charAt(0)+reply.substring(1)+'&lt;/a&gt;'; }); return data; } function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length &gt; 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); var shortdate = time_value.substr(4,2) + " " + time_value.substr(0,3); delta = delta + (relative_to.getTimezoneOffset() * 60); if (delta &lt; 60) { return '1m'; } else if(delta &lt; 120) { return '1m'; } else if(delta &lt; (60*60)) { return (parseInt(delta / 60)).toString() + 'm'; } else if(delta &lt; (120*60)) { return '1h'; } else if(delta &lt; (24*60*60)) { return (parseInt(delta / 3600)).toString() + 'h'; } else if(delta &lt; (48*60*60)) { //return '1 day'; return shortdate; } else { return shortdate; } } </code></pre> <p>});</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