Becky Becky - 5 months ago 6
Javascript Question

if statement logic not producing the desired result

I have a page called 'services'. When you go to that page from the navigation menu I do not want any of the services to show up (too complicated to explain it). Then on my index page I have links for each type of service there is. If you click on a link it will take you to the services page and only show that service.

For the individual service links, they look like this:

<a href="serviceCheck2#service1">Service 1</a>
<a href="serviceCheck2#service2">Service 2</a>
<a href="serviceCheck2#service3">Service 3</a>

This aspect of this system works. It takes me to the services page and only shows the service I clicked on, from the link.

The part that doesn't work is not showing the services OR the
from the navigation menu. Right now all of the services show and the
does as well.

I tried to create logic to prevent this from happening, but it isn't working. In the javascript below you will see comments like
, this is what I added to try and create logic that it would show the
and specific service item if there was a hash in the browser, or else it would not show the
at all.

What is wrong with my logic?


//get the section name from hash
var sectionName = window.location.hash.slice(1);

if (sectionName != null) { //added
//then show the section
} else { //added
$('#service-display-box').hide(); //added
} //added

#service-display-box {
display: none;
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<div class="service-item-title">1</div>
<h2 class="service-item-description"> Service</div>
<h2 class="service-item-box" id="service2">
<div class="service-item-title">2</div>
<div class="service-item-description"> Service</div>
<h2 class="service-item-box" id="service3">
<div class="service-item-title">3</div>
<div class="service-item-description"> Service</div>
<h2 class="service-item-box" id="service4">
<div class="service-item-title">4</div>
<div class="service-item-description"> Service</div>
<h2 class="service-item-box" id="service5">
<div class="service-item-title">5</div>
<div class="service-item-description"> Service/div>
<h2 class="service-item-box" id="service6">
<div class="service-item-title">6</div>
<div class="service-item-description"> Service</div>
<div style="clear:both;"></div>
<div id="service-top"><span id="service-top-border">Back to all services</span></div>

I've also tried

if (sectionName > 1) {


window.location.hash.slice(1) returns an empty string, which is not the same as null. I think you want to check .length == 0 instead.