Click on anchor link and display div with same ID

Hi there,

I am trying to create a list of services which you can click on to display more information.

I've set my HTML like so:
<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>

I've set all my .service-details divs to display:none, and I would like to display one .service-details when I click on the corresponding anchor link:

<a href="#selling-a-business"> would display the div id="selling-a-business".

I must keep the HTML as is. Can someone please help?

Thanks!
c_stelaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Clark KentSoftware Engineer cum BloggerCommented:
Hello Stela,

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
Prakash SamariyaIT ProfessionalCommented:
Hi C_stela,

Create an event handler for  hyperlink click event and, using that you can get the hyperlink hyperlink reference, manipulate it and show that div!!

I hope you are using jQuery as well for the ease. I added few lines more to achieve this.

Please check my below code as per your requirements

<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>

Open in new window

c_stelaAuthor Commented:
Thank you Prakash for your comment. (Thanks CK too!)

Prakash – I tried your code but JSHint found 3 issues in the files:

$("#home-header .service-box li a").click(function(event){

Open in new window

'event' is defined but never used. — column 60

myString = this.href.replace(window.location.protocol+"//"+window.location.hostname +window.location.pathname,'');

Open in new window

'myString' is not defined. — column 13

$(myString).show();

Open in new window

'myString' is not defined. — column 15

Using your code as is, or the following way, isn't working :(

$("#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();
        });

Open in new window

(I added var in front of myString and removed event from inside the function()

What am I missing here? I have jQuery enqueued and a dependency.
Is there another piece of code I should include?
Thanks!
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
c_stelaAuthor Commented:
I think I'm getting close. I was able to find the script that targets my ".service-details" divs, but I am trying to add more functionality so that the boxes disappear when I click on new links, instead of overlapping on top of each other.

This is the piece of code that works to display the service-details boxes (overlapped):

$('#home-header .service-box li a').click(function() {
    $($(this).attr('href')).css('display', 'block');
});

Open in new window

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');
    
});

Open in new window


I created a JSFiddle so it's easy to see what I mean by the overlap:
https://jsfiddle.net/rdhn60mb/

Any thoughts on how to make this work? Thank you!
c_stelaAuthor Commented:
I am getting close.
I was able to make the clicks open the right box.

This is the new Fiddle with the additional functions that I put in. jsfiddle.net/dwxn7pfk

What doesn't work is that when you click on the same link twice (to toggle open/close) the active class and open/close toggles don't work.

I also want to be able to click the same link and toggle so it closes. Ideally, I also want to be able to click outside of the link (anywhere on the page) and have it close as well.

Thanks for your help!
Prakash SamariyaIT ProfessionalCommented:
Please try below code, it is working in your JSfiddle URL "sfiddle.net/dwxn7pfk"

$('#home-header .service-box li a').click(function(e) {
    e.preventDefault();
     //Comment below line as it hides all divs, and then when you use toggle it shows again!
     //$('.service-details').hide();
    
   //Use DIV's element instead of hyperlink element (this contains the hyperlink element)
    $(".service-details").not($($(this).attr('href'))).hide();
    $(".service-details").not($($(this).attr('href'))).removeClass('active');
    
    $($(this).attr('href')).toggle();
    $($(this).attr('href')).toggleClass('active');
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.