dropdown list that links to another page with direct href in a same page

Question

Having problem linking to page content with the dire href I wanted.

Right now if I click on the dropdown list, it will go to armchair. e.g. click on sofa still go armchair.

How do I go to other category?

The information are stored in the same page, for all the category. I need to display the right content when users click on the different category.

This is the array that I have in productData.php for the list

$collectionArr = [
["catCode"=>"ac", "catName"=>"Armchair"],
["catCode"=>"sf", "catName"=>"Sofa"],
["catCode"=>"st", "catName"=>"Side Table"],
["catCode"=>"ct", "catName"=>"Coffee Table"],
["catCode"=>"dt", "catName"=>"Table"],
["catCode"=>"cs", "catName"=>"Chair / Stool"],
["catCode"=>"sb", "catName"=>"Side Board"],
];

my collectiondropdown.php

  foreach ($collectionArr as $name => $liDetail) {
  echo "<a href='collectionPage.php#{$liDetail["catCode"]}' {$liDetail["catName"]}</a><hr />";

}

My HTML for the menu

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <?php include 'productData.php'; ?>
        <?php
           include 'collectiondropdown.php'
         ?>
    </ul>
  </li>   

HTML that stores all the content

<div id="ac">
<ul>
<li><a name="ac" href="collectionPage.php?cat=ac&page=1">1</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=2">2</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=3">3</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=4">4</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=5">5</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=6">6</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=7">7</a></li>
</ul>
 <!-----Page 1-------------------->
 <div id="acPage1" class="page" style="">
   <p>List of content after clicking 1</p>
 </div>
<!-----Page 2-------------------->
 <div id="acPage2" class="page" style="display:none">
   <p>List of content after clicking 2</p>
 </div>
</div><!----end of ac--->

<div id="sf">
<ul>
<li><a name="sf" href="collectionPage.php?cat=sf&page=1">1</a></li>
<li><a name="sf" href="collectionPage.php?cat=sf&page=2">2</a></li>
<li><a name="sf" href="collectionPage.php?cat=sf&page=3">3</a></li>
</ul>
<!-------Same as ac-------->
</div>
<div id="st">
xxxxxxxxxxx
</div>
<div id="ct">
xxxxxxxxxxx
</div>
<div id="dt">
xxxxxxxxxxx
</div>
<div id="cs">
xxxxxxxxxxx
</div>
<div id="sb">
xxxxxxxxxxx
</div>

Answer 1

If I understood your problem correctly, then named anchors can be a solution. For that following changes need to be implemented -

In HTML page insert the named anchors. I suggest enclosing the first word in the div in a named anchor as below -

<div id="ac">
    <a name="ac">x</a>xxxxxxxxxx
</div>
<div id="sf">
    <a name="sf">x</a>xxxxxxxxxx
</div>
<div id="st">
    <a name="st">x</a>xxxxxxxxxx
</div>
....
....
<div id="sb">
    <a name="sb">x</a>xxxxxxxxxx
</div>

And for dynamic list, update code as follows to have the links point to the named anchors -

foreach ($collectionArr as $name => $liDetail) {
    echo "<a href='collectionPage.php#{$liDetail["catCode"]}'>{$liDetail["catName"]}</a><hr />";
}