CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Colin Roemer
Colin Roemer

Reputation: 13

Using the same ID value multiple times to anchor to the same location

I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?

<div id="grid-item" class="grid-item grid-item-1">
    <div class="grid-project">
        <img class="profile-image" src="img/image1.png">
    </div>
    <div class="grid-overlay">
        <div class="project-info">
            <a href="#project-link" id="toggle">
                <h4 class="project-name">Headline 1</h4>
                <p class="project-categories">description 1</p>
            </a>
        </div>
    </div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
    <div class="grid-project">
        <img class="profile-image" src="img/image.png">
    </div>
    <div class="grid-overlay">
        <div class="project-info">
            <a href="#project-link" id="toggle">
                <h4 class="project-name">Headline 2</h4>
                <p class="project-categories">description 2</p>
            </a>
        </div>
    </div>
</div>


 <div id="slideshow" class="slideshow">
        <div class="slideshow_inner">
        <a name="project-link" class="anchor">
            <img src="img/slide_img_1.png">
        </div>
    </div>

Upvotes: 0

Views: 2548

Answers (1)

Varin
Varin

Reputation: 2443

If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:

<a href="#project-link" id="toggle">

to this:

<a href="#project-link" id="toggle2">

and don't use same id twice...

Also, you have used name="" in the second section of your html, instead of id:

<a name="project-link" class="anchor">

Upvotes: 1

Related Questions