Search Results: “jquery”

10+ handy and reusable jQuery code snippets

by Jean. 6 Comments

Over the years, jQuery became a must-use for every web developer. It is simple to use, fast and very powerful. In this article I have put together a series of 10+ handy jQuery code snippets you may save and copy to use at your own discretion. These snippets are super easy to adapt to match your own script.

10 fresh and fantastic jQuery plugins

by Jean. 5 Comments

Hundreds of new jQuery plugins are released each month. Most of them are fairly basic, but on the other hand, some others are truly incredibles. Here’s a list of fantastic jQuery plugins recently released.

Useful jQuery code snippets

by Jean. 9 Comments

jQuery is definitely a great tool when it comes to front-end web development. Today, I’m sharing with you a bunch of super useful jQuery snippets from my personal favorites.

Awesome jQuery snippets to work with forms

by Jean. 13 Comments

Forms are definitely a very important part of a website, but they can be also a bit tricky to handle. To help you working more easily with HTML forms, I have compiled some very useful jQuery code snippets from my personal snippet library in this article.

jQuery plugins for awesome web typography

by Jean. 4 Comments

Typography is a very important part of a website design. But it is also often neglected. In this article, I have compiled the most awesome jQuery plugin to take total control of your site typography.

jQuery Accordion Plugin

by . 0 Comments

The HTML:

<div id="accordion">
    <div data-header="Accordion Title 1">Content 1</div>
    <div data-header="Accordion Title 2">Content 2</div>
    <div data-header="Accordion Title 3">Content 3</div>
    <div data-header="Accordion Title 4">Content 4</div>
</div>

The Basic CSS:

#accordion {
  width:300px;
  background-color:green;
  border:2px solid black;
}

#accordion h2.accordion-header {
  cursor:pointer;
  background-color:black;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:10px 15px;
  margin:0px 0px;
}

#accordion h2.active {
  background-color:yellow;
  color:black;
}

#accordion div[data-header] {
  padding:10px;
}

Usage:

$(function() {
    $('#accordion').accordion({
        active: 1, // Which panel that will open at the first time
        sUpSpeed: 400, // Speed of the panel when closed
        sDownSpeed: 400, // Speed of the panel when opened
        sUpEasing: null, // Easing of the panel when closed (example: "easeInOutExpo")
        sDownEasing: null // Easing of the panel when opened
    });
});