how to reload larger div after accessing smaller div

Vote count: 0

    [main][1]
    http://ift.tt/2l7JPDb

I created three onclick trigger functions that trigger three separate divs (sports, interactive, news) in a larger horizontal div ("main") . They all show up initially but for some reason, the function only works after one click then I have to refresh the page. For example if I click trigger the sports function I have to refresh the page before I can use the news button. From there I have to refresh the page. How do I get the main div to reload before I trigger a second of third event? I've tried location.reload() but that doesn't seem to work.

Interactive

    JavaScript
    $( "#newsbtn" ).click(function() {
    $("#sports").fadeOut( "slow", "linear" ),
    $("#interactive").fadeOut( "slow", "linear" );})


   $( "sportsbtn" ).click(function() {
   $("#interactive").fadeOut( "slow", "linear" ),
   $("#news").fadeOut( "slow", "linear" );})


  $("#interactivebtn" ).click(function() {
  $("#sports").fadeOut( "slow", "linear" ),
  $("#news").fadeOut( "slow", "linear" );})


   $( "#news" ).click(function() {
  $("#sports").fadeOut( "slow", "linear" ),
   $("#interactive").fadeOut( "slow", "linear" );})
  ;})

asked 41 secs ago

Tesalon Felicien

Let's block ads! (Why?)



how to reload larger div after accessing smaller div