Avatar of c_stela
c_stela
 asked on

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!
jQueryJavaScriptWeb Development

Avatar of undefined
Last Comment
Prakash Samariya

8/22/2022 - Mon
Clark Kent

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 Samariya

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_stela

ASKER
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!
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
c_stela

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

ASKER
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!
ASKER CERTIFIED SOLUTION
Prakash Samariya

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.