It’s no secret that clients want more than just static web pages these days and user experience is more important than ever. So as a front end developer I am stepping up my game and learning to make things move with jQuery.

Learning a new language is always daunting so baby steps it will have to be. I’ll be doing one tiny project at a time starting with creating a very simple content accordion.

Rather than having my head stuck in a book, I have found that jumping straight in and coding has allowed me to learn how different functions work. My jQuery is here for you to depict. I’m happy that it works at the moment but any suggestions are welcome if you think it could be revised.

$(document).ready(function () {
$('.slide-container').hide();
$('h2:first').addClass('active')
$('.slide-container:first').slideDown().fadeIn('slow');
$("h2.control").click(function () {
if ($(this).next().is(':hidden')) {
$("h2.control").removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
else {
$(this).toggleClass('active').next().slideUp();
}
return false;
});
});

So yes it might just be a very simple content slider but we all have to start somewhere. Now what to build next ….