Question

I have a demo in JS Bin.

http://jsbin.com/ivigab/1/

What I would like to do is quite simple, I would like to be able to click to one li and give it a class of active and have the the child div fade in. All this would happen in reverse for the previous active li at the same time too if possible.

Also as the title states, I would like to change the active li to be random each time a user views the page, is this possible?

B

Answer 1

This is a really simple example but should give you the desired result:-

$('#entries li').click(function() {

  // remove active class and fade div out from all list elements
  $('#entries li').removeClass('active');
  $('#entries div').fadeOut();

  // add active class to the clicked element and fade the div in
  $(this).addClass('active');
  $('div', this).fadeIn();    

});

// generate a random number ranging between 0 and the number of available li's
var random = Math.floor(Math.random() * $('#entries li').length);

// trigger the click event on the random element
$('#entries li').eq(random).trigger('click');

Here’s a fiddle