<html><head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
.service-details{display:none;}
</style>
</head><body>
<section id="home-header">
<div class="col-sm-5">
<div class="service-box"><h2>Business Law</h2>
<ul>
<li><a href="#creating-a-business"><h3>Creating a Business</h3></a></li>
<li><a href="#growing-a-business"><h3>Growing a Business</h3></a></li>
<li><a href="#operating-a-business"><h3>Operating a Business</h3></a></li>
<li><a href="#selling-a-business"><h3>Selling a Business</h3></a></li></ul>
</div>
</div>
<div class="service-details" id="creating-a-business">
<h3>Creating a Business</h3>
<p>... </p>
</div>
<div class="service-details" id="growing-a-business">
<h3>Growing a Business</h3>
<p>...</p>
</div>
<div class="service-details" id="operating-a-business">
<h3>Operating a Business</h3>
<p>...</p>
</div>
<div class="service-details" id="selling-a-business">
<h3>Selling a Business</h3>
<p>...</p>
</div>
</section>
<script type="text/javascript">
$("a").click(function(event){
myString = this.href.replace(window.location.protocol+"//"+window.location.hostname +window.location.pathname,'');
$('.service-details').hide();
$(myString).show();
});
</script>
</body></html>
$("#home-header .service-box li a").click(function(event){
'event' is defined but never used. — column 60myString = this.href.replace(window.location.protocol+"//"+window.location.hostname +window.location.pathname,'');
'myString' is not defined. — column 13$(myString).show();
'myString' is not defined. — column 15$("#home-header .service-box li a").click(function(){
var myString = this.href.replace(window.location.protocol+"//"+window.location.hostname +window.location.pathname,'');
$('.service-details').hide();
$(myString).show();
});
(I added var in front of myString and removed event from inside the function()$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
And this is the code with some functionality for toggling the class, so I can hide the boxes after I click on a new link:$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
I have gone through the entire html code and found that everything is fine with it. You have to just keep a few things in mind while calling ID on your page.
1.) If you are using ID on the same page, the you can simply call the ID (without hyperlink)
ex- #callyourID
2.) But, if you are calling this ID on some other page, then you have to call it like this:
www.xyz.com/#callyourID
Hope, this will solve your bug!!!!
Thanks & Regards
Clark Kent