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>Bu
<ul>
<li><a href="#creating-a-business
<li><a href="#growing-a-business"
<li><a href="#operating-a-busines
<li><a href="#selling-a-business"
</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"
I must keep the HTML as is. Can someone please help?
Thanks!
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>Bu
<ul>
<li><a href="#creating-a-business
<li><a href="#growing-a-business"
<li><a href="#operating-a-busines
<li><a href="#selling-a-business"
</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"
I must keep the HTML as is. Can someone please help?
Thanks!
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
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
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
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>
Thank you Prakash for your comment. (Thanks CK too!)
Prakash – I tried your code but JSHint found 3 issues in the files:
Using your code as is, or the following way, isn't working :(
What am I missing here? I have jQuery enqueued and a dependency.
Is there another piece of code I should include?
Thanks!
Prakash – I tried your code but JSHint found 3 issues in the files:
$("#home-header .service-box li a").click(function(event){
myString = this.href.replace(window.location.protocol+"//"+window.location.hostname +window.location.pathname,'');
$(myString).show();
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();
});
What am I missing here? I have jQuery enqueued and a dependency.
Is there another piece of code I should include?
Thanks!
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):
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!
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');
});
$("#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 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!
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!
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!
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
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.