I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.

This is my JavaScript

$("#view").click(function(){
  $('.hidden-content').slideToggle(500).toggleClass("active");
});

I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.

This is my JavaScript

$("#view").click(function(){
  $('.hidden-content').slideToggle(500).toggleClass("active");
});

• javascript
• jquery
• show-hide

• 4 IDs must be unique within an HTML document. – C3roe Commented Nov 4, 2016 at 12:04
• 2 id should be unique in a page. – Samir Commented Nov 4, 2016 at 12:04
• You're better off using unique IDs and use classes for styling etc. across multiple elements. – Matthijs Commented Nov 4, 2016 at 12:04
• You can use jquery UIs accordion for this jqueryui./accordion – Akshey Bhat Commented Nov 4, 2016 at 12:06
• @Matthijs is that really matters now? – eatmailyo Commented Nov 4, 2016 at 12:06

5 Answers 5

You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.

Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:

$(".view").click(function() {
  $(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});

.div {
  width: 400px;
}
.content {
  padding: 10px;
}
.view {
  color: red;
  cursor: pointer;
}
.hidden-content {
  display: none;
}
.hidden-content .active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

It is a bad practice to use same id for more than one elements.

You can try the following

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
<div class="hidden-content">
    hidden content
</div>

and your jquery will look like the following

$(".view").click(function(){
  $(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});

You should replace the id to class. And for accordion, you can use like below.

HTML,

<div class="div">
    <div class="content">
        <div class="view">view/edit</div>
    </div>

    <div class="hidden-content">
        hidden content
    </div>
</div>
<div class="div">
    <div class="content">
        <div class="view">view/edit</div>
    </div>

    <div class="hidden-content">
        hidden content
    </div>
</div>

<div class="div">
    <div class="content">
        <div class="view">view/edit</div>
    </div>

    <div class="hidden-content">
        hidden content
    </div>
</div>

<div class="div">
    <div class="content">
        <div class="view">view/edit</div>
    </div>

    <div class="hidden-content">
        hidden content
    </div>
</div>

Js,

<script>

$(document).ready(function(){
    $(".hidden-content").hide();
    $(".view").on('click', function(){

        $(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");

        if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
            $(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
            $(this).parents().parents().siblings().find(".hidden-content").hide();
        }
    });
});

 </script>

You can change your click event as follows to make it work.

$("div[id='view']").click(function() {
  $(this).parent().next().slideToggle(500).toggleClass("active");
});

Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.

Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.

$("div[id='view']").click(function() {
  $(this).parent().next().slideToggle(500).toggleClass("active");
});

.div {
  width: 400px;
}
.content {
  padding: 10px;
}
#view {
  color: red;
  cursor: pointer;
}
.hidden-content {
  display: none;
}
.hidden-content .active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div id="view">view/edit</div>
  </div>

  <div class="hidden-content">
    hidden content
  </div>
</div>

$(".view").click(function() {
  $(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});

.div {
  width: 400px;
}
.content {
  padding: 10px;
}
.view {
  color: red;
  cursor: pointer;
}
.hidden-content {
  display: none;
}
.hidden-content .active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>

<div class="div">
  <div class="content">
    <div class="view">view/edit</div>
  </div>
  <div class="hidden-content">
    hidden content
  </div>
</div>