News

Use jQuery to create expanding panels

Recreate the expanding panels found on the Active Theory site. Perfect for showcasing your work

Use-jQuery-to-create-expanding-panels

Use jQuery to create expanding panels

Inspiration: activetheory.net

Active Theory are an agency that produce stunning pieces of work means that they need a stunning web portfolio to match. The site makes use of attention-grabbing techniques such as background video plus they use expanding panels to showcase their work as we will demonstrate here.

TECHNIQUE

Create an angled expanding panel

Getting started

We are going to make an angled expanding panel, so to start off we add a link to the jQuery library in the document head section of our page. Right after this, we add in our functionality that uses jQuery to create a toggle for sliding in and out. This will handle
the entire functionality for us.

001    <script src=”js/jquery.js”></script>
002    <script>
003    $(document).ready(function(){
004        $(“#exp”).click(function(){
005            $(“#tray”).slideToggle();
006        });
007    });
008    </script>
009    

Style the content

We now add our style tags to design our page content. Here we set the body to be 100% of the page with a light blue background. We also set the text that will be clicked on to expand the content to have pointer cursor over it, which is the finger pointer.

001    <style>
002    body{ font-family: sans-serif; 
margin: 0; width: 100%; height:100%;
background: #b9e0fd;}
003    #exp{cursor: pointer;}
004    

Sliding tray

Here we are giving the sliding tray a different-coloured blue background so that it is more visible on the screen. We then make the height 200px, but this can be whatever your content is. Next we set this to not display so that we can expand it when we click. The container is pushed down a little from the top with some padding to handle the angle.

001    #tray{ background: #034677; height: 200px; display:none;}
002    .container{
003        display: block; width: 100%;
004        overflow: hidden; padding-top: 50px;
005    }
006    .lPad{ padding-left: 200px;}
007    

The rotated section

The section needs to be at an angle, so inside of our container we have an angled section with the class of ‘rotated’. In the following code snippet we are rotating by 3 degrees and also taking our margin back 50px on the sides – this is because if the <div> is angled then it won’t fit fully to the sides.

001    .rotated{
002        margin: 0 -50px;
003        -webkit-transform-origin: left center;
004        -moz-transform-origin: left  center;
005        -o-transform-origin: left center;
006        -ms-transform-origin: left center;
007        transform-origin: left center;
008        -webkit-transform: rotate(-3deg);
009        -moz-transform: rotate(-3deg);
010        -o-transform: rotate(-3deg);
011        -ms-transform: rotate(-3deg);
012        transform: rotate(-3deg);
013    }
014    </style>



Add the <div> tags

Finally we add the <div> structure to the page. Here we have a container to hold the whole content, the rotated section is at an angle and we have some text stating ‘expand’. Clicking on this expands the tray. We have a class of ‘lPad’ to add left padding to the content. Save and view this in the browser.

001    <div class=”container”>
002        <div class=”rotated”>
003        <h2 id=”exp” class=”lPad”>Expand </h2>
004        <div id=”tray” class=”lPad”></div>
005        <p class=”lPad”>Some other page  content</p>
006        </div>
007    </div>
008    


Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×