Link to home
Start Free TrialLog in
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!
Avatar of Clark Kent
Clark Kent
Flag of India image

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

Avatar of c_stela
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!
Avatar of 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!
Avatar of 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
Avatar of Prakash Samariya
Prakash Samariya
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial