Hello readers , Today in my blog I have tried to create Slideable Grid with the help of jQuery .

As we all add columns to our web pages either for dividing the data as per the screen size so that the content would not get overlapped or another thing could be for beautifying our web page .

But , I have tried to make the slideable grid with the help of jQuery . The grid will slide whenever the user clicks over them .

Now , for creating the Grid system, firstly I need to create an outer div around the grid, after that for each grid content I have created sections and have alloted relative position to them .

Now, inside these created grid I have positioned the inner div as absolute and have provided the specific height and width of the parent element i.e the outer div .

The inside div will remain hidden , until the clicks over the particular grid which he/ she wants to slide .

Now , Below is the HTML code for the slideable grid :-

<div id="services" class="cf">

<section class="service">

<div class="service-icon"><span class="icon-web"></span><br/>Web Design</div>

<div class="service-description"><p>Something descriptive about web design. And what you offer as a service.</p></div>

</section>

<section class="service">

<div class="service-icon"><span class="icon-graphic"></span><br/>Graphic Design</div>

<div class="service-description"><p> ... </p></div>

</section>

<section class="service">

<div class="service-icon"><span class="icon-logo"></span><br/>Logo Design</div>

<div class="service-description"><p> ... </p></div>

</section>

<section class="service">

<div class="service-icon"><span class="icon-dev"></span><br/>Web Development</div>

<div class="service-description"><p> ... </p></div>

</section>

<section class="service">

<div class="service-icon"><span class="icon-3d"></span><br/>3D Design</div>

<div class="service-description"><p> ... </p></div>

</section>

<section class="service">

<div class="service-icon"><span class="icon-illustration"></span><br/>Illustration</div>

<div class="service-description"><p> ... </p></div>

</section>

</div> <!-- END #services -->

As I have created 2 divs inside each section elements where the span tag contains the icons and the title of the grid which would be remain visible until the user triggered any action over it .

For the second div , it would contains the content which would be visible whenever the user clicks over the grid.

Now for styling these grid , I have applied some CSS to it added with the media query at various breakpoints .

Now to the outer most div with the id as services and class clear as we need to put the grid in the left direction , so we need to float them to left .

To the outer div , I have set min-height with overflow as hidden and the width as 33 % such that there would be 3 columns at the desktop size , 2 column and 1 column as we keep decreasing the screen size .

Now moving forward , I have set  service-icon and service-description. As position absolute . I have made its height and width to 100% and made its position set to left .

Now moving towards the @font-face for icon font , I have used fontastic and used it in my CSS .Below is the code for it :-

@font-face {

font-family: "slidable-grid";

src:url("fonts/slidable-grid.eot");

src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),

url("fonts/slidable-grid.woff") format("woff"),

url("fonts/slidable-grid.ttf") format("truetype"),

url("fonts/slidable-grid.svg#slidable-grid") format("svg");

font-weight: normal;

font-style: normal;

}



[class^="icon-"]:before,

[class*=" icon-"]:before {

font-family: "slidable-grid" !important;

font-style: normal !important;

font-weight: normal !important;

font-variant: normal !important;

text-transform: none !important;

speak: none;

font-size: 4em;

line-height: 1;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}



.icon-web:before {

content: "a";

}



.icon-graphic:before {

content: "b";

}



.icon-logo:before {

content: "c";

}



.icon-dev:before {

content: "d";

}



.icon-3d:before {

content: "e";

}



.icon-illustration:before {

content: "f";

}

Now moving over to the JQuery , I have applied a click event which will animate the icon position and it would change its position .

On clicking the service block , I have added an open class that would take the icon back to 0 and made the description block to 100% .

Below is the code for it :-

$(document).ready(function() {

$('.service').click(function() {

var $this = $(this);

if ($this.hasClass("open")) {

$this.find('.service-icon').animate({left: "0"});

$this.find('.service-description').animate({left: "100%"});

$this.removeClass("open");

}

else {

$this.find('.service-icon').animate({left: "-100%"});

$this.find('.service-description').animate({left: "0"});

$this.addClass("open");

}

});

});

Conclusion :-

Hence , I have tried to create slideable grid which will animate whenever any user click over it .

Note :- Any user can also use hover function in the JQuery instead of click function that I have used in my code and even change its state of animation.

This blog works over on all modern browsers such as on Safari , Chrome ,Firefox , Opera etc.