Jon Levi February 2016

Button selects id

So I have these buttons and I want them to show a section with same id.

<aside>
    <button type="button" id="N">16-50mm</button>
    <button type="button" id="J">25-75mm</button>
    <button type="button" id="M">30-50mm</button>
    <button type="button" id="G">50-120mm</button>
    <button type="button" id="K">50-100mm</button>
    <button type="button" id="A">75-200mm</button>
    <button type="button" id="C">75-200mm</button>
    <button type="button" id="F">75-150mm</button>                  
</aside>

<section id="N">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image1 A1"></a>
        <br>
        <figcaption>Name</figcaption>
    </figure>
</section>

<section id="J">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image2 A1"></a>
        <br>
        <figcaption>Name2</figcaption>
    </figure>
</section>

I saw somewhere people use data-id or data-attribute to show specific id. Can I make something like <button type="button" data-id="N">16-50mm</button> and it should show a <section id="N">. I appreciate if someone could help me out with this.

Answers


Rory McCrossan February 2016

As you've seen you cannot have duplicate id attributes in a single document. A better approach is to use data attributes. Try this:

$('aside button').click(function() {
  $('section').hide().filter('#' + $(this).data('id')).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
  <button type="button" data-id="N">16-50mm</button>
  <button type="button" data-id="J">25-75mm</button>
  <button type="button" data-id="M">30-50mm</button>
  <button type="button" data-id="G">50-120mm</button>
  <button type="button" data-id="K">50-100mm</button>
  <button type="button" data-id="A">75-200mm</button>
  <button type="button" data-id="C">75-200mm</button>
  <button type="button" data-id="F">75-150mm</button>
</aside>

<section id="N">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image1 A1">
    </a>
    <br>
    <figcaption>Name</figcaption>
  </figure>
</section>

<section id="J">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image2 A1">
    </a>
    <br>
    <figcaption>Name2</figcaption>
  </figure>
</section>

Working example


Rejith R Krishnan February 2016

Change the ID of the sections to class. Then use the following to get started.

$('aside button').click(function(event){
  $('section.' + this.id).addClass('hide')
      .siblings('section').removeClass('hide');
})
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<aside>
    <button type="button" id="N">16-50mm</button>
    <button type="button" id="J">25-75mm</button>
    <button type="button" id="M">30-50mm</button>
    <button type="button" id="G">50-120mm</button>
    <button type="button" id="K">50-100mm</button>
    <button type="button" id="A">75-200mm</button>
    <button type="button" id="C">75-200mm</button>
    <button type="button" id="F">75-150mm</button>                  
</aside>

<section class="N hide">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image1 A1"></a>
        <br>
        <figcaption>Name</figcaption>
    </figure>
</section>

<section class="J hide">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image2 A1"></a>
        <br>
        <figcaption>Name2</figcaption>
    </figure>
</section>


Eddie Pat February 2016

Your question is not clear. If you want a button to show section by button click event, you can't use same "id" on button and section. Maybe clarify your question so i can help you.

Post Status

Asked in February 2016
Viewed 3,079 times
Voted 9
Answered 3 times

Search




Leave an answer