1

HTML: Refering to solution from this question, how can I expand a section and scroll to a defined link ?

In example below, I need to jump to Link2 defined in collapsed section:Section 2, by clicking a link in Section 1. If Section2 is expanded, the links in Section1 works fine, but if Section2 is collapsed, the links fail.

I am new to HTML, is there a way to do it without using javaScript or jQuery ?

Thanks in advance !!

<style type="text/css">
  div.Heading {
    text-align: center;
    border-style: solid;
    background-color: #C65911;
    font-size: 20px;
    font-weight: bold;
    border-width: 2px;
  }
</style>

<details>
  <summary>Section 1</summary>
  <p><br />
    <div>
      <table>
        <tr>
          <th>Links</th>
        </tr>
        <tr>
          <td><a href="#testName0">Link 1</a></td>
        </tr>
        <tr>
          <td><a href="#testName1">Link 2</a></td>
        </tr>

      </table>
    </div><br />
  </p>
</details>

<details>
  <summary>Section 2</summary>
  <p>
    <br />
    <a name="testName0">
      <div class="Heading">Link 1 here</div>
    </a>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br />
    <a name="testName1">
      <div class="Heading">Link 2 here</div>
    </a>
  </p>
</details>
palaѕн
  • 72,112
  • 17
  • 116
  • 136
TK_Dev
  • 11
  • 1
  • Why not use jQuery and change collapse style when pressing a link? See this: https://getbootstrap.com/docs/4.0/components/collapse/. You still need to add a jQuery solution to collapse the correct section. There might be a faster and cleaner solution, but in your situation i would have done this. – Ronnie Oosting Nov 08 '17 at 12:41
  • It is better to use jQuery for this kind of tasks like @RonnieOosting said. – Aakash Thapa Nov 09 '17 at 04:05
  • Hi Tarang, wondering if you have found a solution and if my answer helped you in some way. – Ronnie Oosting Nov 09 '17 at 10:34
  • Sorry for late reply.. Yes, got it solved using jQuery. Thanks for your help!! – TK_Dev Dec 18 '17 at 09:09

0 Answers0