Create Direct External Link for Hidden Sections

Question

I've created this site: http://www.successwithenergycode.com/

And, I want to be able to create external links that directly link to state specific sections of the page. Currently it is setup that the state specific resources are populated based on where a user clicks on a map and they are not all displayed at once. Is there a why to "activate" a certain state then create a link to it?

Here's code for the maps:

 <section>

      <h3><p>southeast energy Efficiency Association</p>
      <p>Click on a state to access resources</p></h3>

      <div class="regionLogoSE">
        <a href="http://www.seealliance.org/" target="_blank">
          <img src="images/seea_logo.png" alt="Southeast Energy Efficiency Association logo">
        </a>
      </div>

      <div id="list">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 547.2 552.8">

    <style>
        path:hover { transition-duration: .56s; }
    </style>

<a href="#alabamar" >
    <path id="AL" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 

     d="M174.5,281....2-0.5,0.5L174.5,281.3z"/>
</a>

<a href="#northcr" >
    <path id="NC" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"
      d="M456.1,206.5l-31.6-34.7l-32.2-0.9
        c0.2-1.6,0.4-3.3,....7.1,205.7,456.1,206.5L456.1,206.5z"/>
</a>

<a href="#virginiar" >
    <path id="VA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M526.9,...5,538.5,54.7,538.4,55C537.8,56.3,538.5,54.7,538.4,55z"/>
</a>

<a href="#kentuckyr" >
    <path id="KY" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M187.6,61.2c0.7.....2,61.3,187.6,61.2C187.7,61.4,188,61.2,187.6,61.2z"/>
</a>

<a href="#tennr" >
    <path id="TN" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
     d="M147.7,108.9c-....47.7,108.9z"/>
</a>

<a href="#southcr" >
    <path id="SC" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
    d="M389.4,273.2...4C387.1,271.7,388.7,273,389.4,273.2C389.8,273,388.9,273,389.4,273.2z"/>
</a>

<a href="#floridar" >
    <path id="FL" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
         d="M205,335.5c1.1....5,542.9C373.6,543.8,375.5,542,374.5,542.9z"/>
</a>

<a href="#missr" >
    <path id="MS" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
      d="M97.9,238.3c-0.5.....4,4.9,214.4z"/>
</a>

<a href="#louisianar" >
    <path id="LA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M17.8,238.3V276c1......8,238.3z"/>
</a>

<a href="#georgiar" >
    <path id="GA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M273.1,312c0.3.....c-0.7,1.1,0.9,2.7,1.7,3.5c0.8,0.8,0.6,2.3,0.8,3.4
        L273.1,312z"/>
</a>


<polyline id="LA_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" points="
    97.9,238.3 17.8,238.3 17.8,238.3 "/>
<path id="MS_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
    M182.8,164.6l-59....1,1.5,1,2.4c0.1,1.6,1.4,4.1,1.1,5.4"/>
<path id="GA_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
    M387.7,276.2c0.2-0.9,0....-2.4,3.3-3.2c2.3-1.5,6.6-2.1,8.1-4.4c1.5-2.5,3.5-3.6,5.6-5.4c1.6-1.3,3.2-4-0.1-3.8"/>
<g id="AL_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M177.3,334.8c0,0-0.2,0.2-0.5,0.5l-2.4-53.9l10.9-109.8c-0.7-2.4-1.2-4.8-2.6-6.9c24.3,0,48.7,0.1,73,0.1"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M272.5,308.2c0.8,0.8,0.6,2.3,0.8,3.4l-0.1,0.4v0h-72.9c-0.1,1.6-0.5,3-0.7,4.5c-0.2,1.7,0.3,1.4,1.5,2.6c0.9,0.8,0.7,2.1,1.3,3
        c2,1,4.2,2.4,2.9,5c-0.5,1.1-0.5,1.7-0.4,2.9c0.1,1.7,1,1.6,1.7,3.1c0,0-0.4,0.6-1.5,2.5c-1,0.1-2.6,0.4-2.6,0.4
        c-0.3,0.3-0.5,0.5-0.8,0.8c-0.6,0.7-1.3-0.6-1.4-0.5c-0.5,0.7,0.3,1.7-0.6,2.5"/>
</g>
<g id="TN_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M292.8,164.6"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M139.4,127.8c0.7,0.9,1.9,2.4,0.1,2.9c-2.2,0.6-0.8,2,0,3.1l-2.6,2.4c-1,0.2-5.6,0.9-3.8,2.6c0.9,0.8,2.2,1.4,1.5,2.8
        c-0.4,0.9-1.3,2.4-2.5,2.1c-2.2-0.5-0.2,4-1.6,3.6c-1.2-0.4-1.4-1.2-2.4,0c-0.3,0.4-2.1,3.9-1.1,3.2c0.4-0.2,2.1-2,2.4-1.3
        c0.4,0.8,0,2-0.1,2.8c-0.1,0.9-1.8,0.9-2,1.9c-0.1,0.4,1.6,0.8,1.8,1.5c0.3,1,0.4,2.1,0.5,3.1c0.1,0.8-2.7,1.6-3.1,2.7
        c-0.4,1.1,0.3,1.2-1,1.6c-0.7,0.2-3.1,0.6-2,1.6"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M366.6,108.4c-0.2-0.9,0.6-2.1,0.7-3l-180.4-2.5l0.1,6.1l-39.3-0.1c-0.1,0.1-0.1,0.2-0.1,0.2"/>
</g>
<g id="NC_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M292.8,164.6l-0.1-6c1-0.4,1.5-6,3.8-3.3c0.6,0.7,2.2-0.2,2.9-0.6c1.1-0.6,0.8-2.3,1.6-3.1c0.8-0.8,0.3-1.9,0.7-2.7
        c0.4-0.9,1.3-1.7,2-2.4c1.5-1.5,2.2-2,4.4-2c1.6-1.1,3.7-1,5.5-0.7c0.6,0.1,2.1,0.5,2.5,0c0.9-1.4,1.6-2.1,3.2-2.5
        c1.9-0.5,3.2-2.8,5.2-3.4c1.1-0.3,1.9-2.1,2.9-2.1c0.4,0,0.3-0.6,0.6-0.6c0.7,0,1.3,0.8,2,0.9c1.1-1,3.5-2.9,2.5-4.4
        c-2.1-3.5,2.9-0.8,3.4-1.4c0.4-0.6,0-1.4,0.6-2.1c0.7-0.8,1.6-1.6,2.6-2c0.6-0.2,2.1-0.2,2.4,0.6c0.4,0.8-1,1.2,0.5,1.7
        c1.4,0.5,3.1-0.9,3.7-2.1c1.2-2.3,2.2-2.9,4.5-3.7c1.1-0.4,4.5-0.9,4.5,0.8c0,1.9,3.5-0.7,3.8-1.6c0.7-2,1.8-4.1,3.2-5.7
        c0.8-0.9,1.9-1.4,3.1-1.6c0.1,0,1.4,0.2,1.3,0.3c0.4-0.4-0.8-1.7-0.5-2.4c0.2-0.5,0.7-1.9,1.1-2.3c0.6-0.6,0.1-0.9-0.1-1.7
        c-0.2-0.9,0.6-2.1,0.7-3c9.7,0.7,19.5,1.7,29.2,1.7c15.7,0,31.5,0,47.2,0c27.7,0,55.4,0,83.1,0"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M458.5,206.5c-1-0.4-1.4-0.8-2.4,0l0,0l-31.6-34.7l-32.2-0.9c0.2-1.6,0.4-3.3,0-4.9c-0.5-1.9-2.5-3.5-3.3-5.4
        c-0.7-1.5-2.5,2-3.7,1.2c-0.5-0.3-0.4-1.2-0.5-1.7c-0.1-0.8-1.1-1.2-1.6-1.9c-9.3-0.3-18.6-0.6-27.9-0.8c-1.2,0-3.2,0.3-4.1-0.7
        c-0.5-0.6-2.6,2-4.1,0.1c-0.1-0.1-2,1.5-2.7,1.6c-1.1,0.3-2.6,0.2-3.6,0.8c-1.8,1.1-3,1.9-5,2.7c-1.2,0.5-7.2,1.3-7.3,2.6"/>
</g>
</svg>

      </div>

    </section>

Here's sample code for the states:

<section id="alabamar">
    <section class="statetitle">
      <h3>Alabama Resources</h3>
      <p>Click on the links below to access checklists and tech tips</p>
    </section>


    <article class="resourceWrap">

      <div class="techTips">

        <div >
          <img src="images/techtip_icon2.png" alt="Builders Techtip icon">
          <span class="techTipsHead"><p >Tech Tips</p></span>
        </div>

        <ul>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Foundation.pdf" target="_blank"><li><p>Foundation</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Framing.pdf" target="_blank"><li><p>FRAMING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_HVAC.pdf" target="_blank"><li><p>HVAC INSTALLATION</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Electrical.pdf" target="_blank"><li><p>ELECTRICAL</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Plumbing.pdf" target="_blank"><li><p>PLUMBING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_AirSealing.pdf" target="_blank"><li><p>AIR SEALING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Insulation.pdf" target="_blank"><li><p>INSULATION</p></li></a>
        </ul>
      </div>

score 0 · Answer 1 · edited May 23 '17 at 11:51

I'm not 100% sure I understand your code, but I think this will work.

First, add css code like this:

section:target
{
    display: block;
}

The :target pseudo selector means that this style is applied to whatever the target element is. For example, the target element for this URL http://example.com/page.html#target would be the one with id='target'. This will allow you to show only the section you are linking to. If you want it to scroll to that section as well, I think you want to put an anchor with the same name as the target at the location you want it to scroll to, like this:

<h3><a name='alabamar'>Alabama Resources</a></h3>

Now, by simply appending #alabamar to the URL to the page with the element section#alabamar, the correct information will be shown and the page will scroll right to it.

However, you have one additional problem. Do you want the links to go to the domain you linked to: www.successwithenergycode.com? The page there is just a frame that holds the real site. This will make it very difficult to make your links go where you want in the real site rather than just taking you to a different part of the domain the frame is hosted on.

Side Note: Frames are nasty. Anytime I personally visit a webpage, and I notice it doing something like this, I right click and press "Show Only This Frame". See this Stack Overflow question for more reasons why not to use frames.

Create Direct External Link for Hidden Sections

1 Answers1