Link To Heading On Different Page And Make Paragraph Visible From Footer Link While Not On Linked-to Page

This question is a follow-up to this question: How do I link to a heading and cause a click event to fire when the link is clicked in JavaScript? Basically I am trying to link from

Solution 1:

I didn't understood completly the question but you could set the href as# set a data-attribute, something like a data-href="your/location.html" and create a method and set it onclick=yourProcess() and when you need to redirect get the data-atribute if you want to delay something you could use setTimeout()

You should take a look for data-attrib ,timing events

I hope this helps...

Solution 2:

See my comments below, but this solved it for me. I can click on the footer links that go to the services page whether I am on the services page or not.

Major credit goes to MikeVelazco. Without his comments I couldn't have gotten this far.

markup:

<div id="service1" class="service">
        <h2  class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">Financial Analysis, Enterprise Performance, & 
            Reporting</h2>
        <p class="p-on-white service-desc p-hide" id="p-service1" >
           xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
    </br>
    <div id="service2" class="service">
        <h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">Software, Systems, & Office Automation 
            Solutions</h2>
        <p class="p-on-white service-desc p-hide" id="p-service2"  > 
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
<div id="col4-footer" class="four-cols-footer four-cols">
    <ul>
       <li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>

       <li><a href="Services.php#service1" data-toggle="service1" onclick="toggle(this)">Financial Analysis & Reporting</a></li>

    </ul>
</div>

js:

// link from footer link to p in services that needs to be displayed when you are on the services page already
function toggle(link) {
    var target, sericeDiv, pToDisplay;
    target = link.getAttribute("data-toggle");
    sericeDiv = document.getElementById(target)
    pToDisplay = sericeDiv.getElementsByTagName('p')[0]
    document.getElementById(target).className = "service-desc";
    pToDisplay.className = "p-on-white service-desc"

}

//when a footer link is clicked that goes to a service on the service page
//this makes the p below the heading display
function openP(){
    var theURL = document.URL;
    var gotArray = theURL.split("#");
    var pToDisplay = document.getElementById("p-" + gotArray[1]);
    pToDisplay.className = "p-on-white service-desc";
}
window.onload = openP();

css:

.p-hide{
    display: none;
}