CODEWITHSUNDEEP
javascriptjquery
Matei Panchios
Matei Panchios

Reputation: 333

JS show/hide default behavior

How can I change the default behavior so that ONLY the contents of the div with the id of films is initially shown?

JavaScript:

window.addEventListener("hashchange", function () {
    var targetDiv = $(location.hash);
    if (!targetDiv.is(':visible')) {
        $('.page').slideUp();
        targetDiv.slideDown();
    } else {
        $('.page').slideUp();
    }
}, false);

JS Fiddle: http://jsfiddle.net/s9cxjrmf/

I tried adding display: none to the page div initially but that doesn't solve my problem at all since it hides everything at start instead of displaying everything. All I need is to keep its functionality while displaying the first div's content only when the page is loaded.

Upvotes: 0

Views: 263

Answers (4)

vinod samudrala
vinod samudrala

Reputation: 26

Add this line 

$('#films').show();

in your script to resolve your issue..

Upvotes: 1

Tushar
Tushar

Reputation: 87203

You can set the hash value to the films on page load. This'll show the content of the films on page load.

Add

window.location.hash = 'films';

to your Javascript.

Demo

window.location.hash = 'films';
window.addEventListener("hashchange", function() {
  var targetDiv = $(location.hash);
  if (!targetDiv.is(':visible')) {
    $('.page').slideUp();
    targetDiv.slideDown();
  } else {
    $('.page').slideUp();
  }
}, false);
.page {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li><a href="#films" class="navLink">Films</a>

  </li>
  <li><a href="#tv_films" class="navLink">TV Films</a>

  </li>
  <li><a href="#tv_shows" class="navLink">TV Shows</a>

  </li>
  <li><a href="#special_events" class="navLink">Special Events</a>

  </li>
</ul>
<div id="films" class="page">
  <img src="https://www.organicfacts.net/wp-content/uploads/2013/05/Banana21.jpg">
</div>
<div id="tv_films" class="page">
  <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/12/no-bundle-deal.jpg">
</div>
<div id="tv_shows" class="page">
  <img src="http://www.med-health.net/images/10416152/image001.jpg">
</div>
<div id="special_events" class="page">
  <img src="http://ecx.images-amazon.com/images/I/41fqB7D6eNL._SX466_.jpg">
</div>

EDIT

You can also use CSS to show the section on page load.

#films {
    display: block
}

Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

You can use jQuery event handlers and can trigger the event on load so that the default view is set

$(window).on("hashchange", function () {
    var targetDiv = $(location.hash).stop(true, true);
    if (!targetDiv.is(':visible')) {
        $('.page').not(targetDiv).slideUp();
        targetDiv.slideDown();
    } else {
        $(window).slideUp();
    }
});
if (location.hash) {
    $(window).trigger('hashchange');
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

When you are using jQuery, use jQuery's event handling style:

$(window).on("hashchange", function () {
    var targetDiv = $(location.hash);
    if (!targetDiv.is(':visible')) {
        $('.page').slideUp();
        targetDiv.slideDown();
    } else {
        $('.page').slideUp();
    }
}).trigger('hashchange');
.page {
  display: none;
}
<ul>
  <li><a href="#films" class="navLink">Films</a>
  </li>
  <li><a href="#tv_films" class="navLink">TV Films</a>
  </li>
  <li><a href="#tv_shows" class="navLink">TV Shows</a>
  </li>
  <li><a href="#special_events" class="navLink">Special Events</a>
  </li>
</ul>
<div id="films" class="page">
  <img src="https://www.organicfacts.net/wp-content/uploads/2013/05/Banana21.jpg">
</div>
<div id="tv_films" class="page">
  <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/12/no-bundle-deal.jpg">
</div>
<div id="tv_shows" class="page">
  <img src="http://www.med-health.net/images/10416152/image001.jpg">
</div>
<div id="special_events" class="page">
  <img src="http://ecx.images-amazon.com/images/I/41fqB7D6eNL._SX466_.jpg">
</div>

Fiddle: http://jsfiddle.net/s9cxjrmf/2/

Upvotes: 1

Related Questions