I have an design here with five span elements that are set to appear when rolled over. My question: The main menu breaks down my elements individually so is there a way that when someone clicks on Tax Reduction Strategies, that it takes them to the page with the Tax Element showing on load? As in is it possible to ad an or a id element?
It currently loads Income Planning everytime, just curious if it's even possible so if they click https://loneb44.sg-host.com/retirement-planning-services/#tax it populates the page with Tax information showing first.
I've checked everywhere before I submitted this. I could not find an answer. So I appreciate any assistance that might come.
Here is my code and it's current page: https://loneb44.sg-host.com/retirement-planning-services/
<section id="approach">
<div class="containerr">
<div class="clear"></div>
<div class="col-lg-06 col-md-6 col-sm-6">
<div id="approach-diagram" class="retiremet-bg">
<span class="retirement"></span>
<span class="social"></span>
<span class="legacy"></span>
<a href="https://loneb44.sg-host.com/retirement-planning-services/#legacy-text"><span class="tax"></span></a>
<span class="five"></span>
</div>
</div>
<div class="col-lg-006 col-md-6 col-sm-6">
<div id="retirement-text" class="approach-text" style="display: block" >
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Income Planning </h2></div>
<p>The experienced professionals at Suncrest Advisors will help you decide how much and where to save your income to create the most robust and sustainable retirement income for your future. This is the foundation of ensuring a comfortable and sustainable lifestyle in retirement.</p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="social-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Investment Management</h2></div>
<p>A reliable investment plan can help secure your retirement. In building and actively managing our client's wealth, we parlay our firm’s stellar research and analysis into having solid long-term conviction around exactly which stock and bonds to own, and why. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="legacy-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Tax Reduction Strategies</h2></div>
<p>When applied appropriately in conjunction with a financial plan, tax planning strategies can help offset the impact of taxes on investment returns and other income. Our financial planning team can work in conjunction with your other professionals to coordinate the most comprehensive plan for your future. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="tax-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Long-Term Care Planning</h2></div>
<p>Long-Term Care Planning aids in planning for life transitions. We work with our clients to make informed decisions regarding how to plan for long-term care expenses and determine the best method of payment, such as: private pay, or Medicaid. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="five-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Legacy Planning</h2></div>
<p>Our careful Legacy Planning can help you pass on much of your hard-earned wealth to your family or your favorite charities without the government’s involvement. The earlier you explore your options, the better you will be positioned to enhance your legacy. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
var hoverEl = jQuery(this).attr('class');
jQuery('#approach-diagram').attr('class', hoverEl + '-bg');
});
jQuery('#approach-diagram').on('mouseleave', function() {
jQuery('#approach-diagram').attr('class', parentEl);
});
jQuery('#approach-diagram span').on('mouseenter', function() {
var clickEl = jQuery(this).attr('class');
jQuery('#approach-diagram').attr('class', clickEl + '-bg');
jQuery('.approach-text').slideUp();
jQuery('#' + clickEl + '-text').slideDown();
parentEl = clickEl + '-bg';
});
</script>
</section>
See this question/answer in order to use jQuery to extract an anchor from your URL. Once you have a value like
'tax', you can use jQuery again to display the contents of the page as you'd like.