Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

A two in one open and close button

September 30th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, jQuery | Tags:

A quick post showing a concept I had in mind about a HTML/CSS button that controls the opening and closing of a accordion element. I wanted to make this with pure HTML/CSS to eliminate the use of images or sprites for buttons. This was purely just for fun and I’ve not tested on IE, we know what may happen!

The Demo:

HTML:

CSS:

JavaScript:

I think it’s quite clear to see what’s happening here. When the #button is clicked a class called “open” is added to the #button and a DIV called with the ID of “content”.

When this class is added to the DOM elements the CSS style, above, is applied. This is where the magic happens. When they get given the class ‘open’ they’re also taking on the new heights and rotation values. These are accompanied with the “transition” property that allows the animation to occur. The good thing with this is that if a browser doesn’t support the animation then it’ll just ‘jump open’ instead of smoothly animating open.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd