We help IT Professionals succeed at work.

Click on anchor link and display div with same ID

104 Views
Last Modified: 2016-05-06
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!
Comment
Watch Question

Clark KentSoftware Engineer cum Blogger
Top Expert 2014

Commented:
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 Professional
CERTIFIED EXPERT
Top Expert 2015

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

Author

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!

Author

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!

Author

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!
IT Professional
CERTIFIED EXPERT
Top Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.