Collapsible Widgets






Small Feature, Excellent Idea
Collapsible Widgets are a simple feature that can easily make a site or application exciting. It could just be the simple thing that adds that wow effect to your project. You can hardly find any of my work where this isn't implemented. All these projects; asset.bz, a1school.net, buysellairtime.com and many others proudly fly the banners of this wonderful feature. Collapsible widgets also provide an avenue for front-end flexibility and space management

Implementation
I won't bore you with any more rants, lets get down to how you can get this implemented. First you add two html elements, an header and a div  like we have below

 <div class="panel">  
   <header class="panel-heading">  
    Widget Header Text  
   </header>  
   <div class="panel-body">  
   </div>  
 </div>

In order to make things a little more exciting, you may also want to include the following in your CSS:


 .panel-heading{  
      background-color: rgba(0, 0, 0, 0);  
      border-bottom-color: rgba(0, 0, 0, 0.2);  
      border-bottom-style: dotted;  
      border-bottom-width: 1px;  
      border-top-left-radius: 3px;  
      border-top-right-radius: 3px;  
      box-sizing: border-box;  
      color: rgb(66, 79, 99);  
      cursor: pointer;  
      display: block;  
      font-family: 'Open Sans', sans-serif;  
      font-size: 12px;  
      font-weight: bold;  
      height: 51px;  
      line-height: 20px;  
      padding-bottom: 15px;  
      padding-left: 15px;  
      padding-right: 15px;  
      padding-top: 15px;  
      text-transform: uppercase;  
 }  
 .panel-body{  
      box-sizing: border-box;  
      color: rgb(122, 118, 118);  
      display: block;  
      font-family: 'Open Sans', sans-serif;  
      font-size: 14px;  
      height: 316px;  
      line-height: 20px;  
      padding-bottom: 15px;  
      padding-left: 0px;  
      padding-right: 0px;  
      padding-top: 15px;  
 }  
 .panel{  
      background-color: rgb(255, 255, 255);  
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px 0px;  
      box-sizing: border-box;  
      color: rgb(122, 118, 118);  
      display: block;  
      font-family: 'Open Sans', sans-serif;  
      font-size: 14px;  
      height: 367px;  
      line-height: 20px;  
      margin-bottom: 20px;  
 }

So far so good. Now JQuery will be cake icing. Before you include the code below, be sure you have a reference to JQuery in your project. In your document ready block, add the following code:


 $('header.panel-heading').each(function () {  
     $(this).click(function () {  
       if ($(this).hasClass('up')) {  
         $(this).next('.panel-body').slideDown();  
         $(this).removeClass('up');  
       }  
       else {  
         $(this).next('.panel-body').slideUp();  
         $(this).addClass('up');  
       }  
     });  
 });

And that will be all. Test your page now, and be sure everything works fine. If you encounter any challenges, please drop your comments below, I will try my best to help you fix it.

Cheers!

Comments

Post a Comment

Popular posts from this blog

Resize or Crop Image before Upload Using HTML5 File API

Image
I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that. Step 1: Download CropperJs Plugin There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's the github link Step 2: Import the CropperJs Plugin Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in t
Read more

Get Creative With Data Tables: Row Click Events

Image
Introduction Datatables from datatables.net are so lovely, especially with the responsive extension that you can enable by including dataTables.responsive.js in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'. Issue Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at asset.bz to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc. Solution Apparently, the solution isn't far fetched. The sample code below would do the job nicely: // HTMLTableData is your array of records to be displayed in the data table
Read more

Exception from HRESULT: 0x80131040

Image
Background: I just recently upgraded to Windows 10, and I must confess, the overall experience immediately got me. I love the fact that our good old start menu was back and better. The tile one was much of a controversy although I have been indifferent about it all the while. I particularly love Cortana, the search assistant who made me remember the office assistants that used to come with the office suite back then. The euphoria I experience was a perfect disguise, however, for the ambush that was ahead. Issue: I went ahead to open VisualStudio and launched the project I was currently working on. I pressed F5 to launch it, only to ram into a jam! The project I still successfully tested only a day before now threw an exception. From my experience, and this situation hasn't proved me wrong, every Microsoft upgrade always has a catch somewhere. This particular one forced me to begin to rectify a fault in an application that was initially 'bug-free' before my u
Read more