Becky Becky - 6 months ago 11
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
service-display-box
from the navigation menu. Right now all of the services show and the
service-display-box
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
//added
, this is what I added to try and create logic that it would show the
service-display-box
and specific service item if there was a hash in the browser, or else it would not show the
service-display-box
at all.

What is wrong with my logic?

$(function(){

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

if (sectionName != null) { //added
//then show the section
$('#service-display-box').show();
$(window.location.hash).show().scroll().siblings().hide();
} 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>
<h2 class="service-item-box" id="service2">
<div class="service-item-title">2</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service3">
<div class="service-item-title">3</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service4">
<div class="service-item-title">4</div>
<div class="service-item-description"> Service</div>
</h2>
<h2 class="service-item-box" id="service5">
<div class="service-item-title">5</div>
<div class="service-item-description"> Service/div>
</h2>
<h2 class="service-item-box" id="service6">
<div class="service-item-title">6</div>
<div class="service-item-description"> Service</div>
</h2>
<div style="clear:both;"></div>
<div id="service-top"><span id="service-top-border">Back to all services</span></div>
</div>
</div>


I've also tried

if (sectionName > 1) {

Answer

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.