CODEWITHSUNDEEP
javascriptjqueryhtml
M. Vlad
M. Vlad

Reputation: 137

Checking if two IDs of two elements with the same class are equal

My HTML looks like this:

<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<p class="question" id="q1">QUESTION1</p>
<p class="answer" id="q1">ANSWER1</p>
<p class="question" id="q2">QUESTION2</p>
<p class="answer" id="q2">ANSWER2</p>

The JavaScript/jQuery looks like this:

$('.question').on("click",function() {
    if ($('.answer').css('display') === 'none') {
        $('.answer').css({'display': 'block',});
    } else {
        $('.answer').css({'display': 'none',});
    }
});

The question is how can I check if the IDs are equal so that I can only change the display of only one of the answer and not all of them?

Upvotes: 1

Views: 451

Answers (7)

achehab
achehab

Reputation: 47

The id attribute value must be unique. To avoid this issue, you can wrap your question and answer in a div that has the id q1, q2, etc...

Here's a snippet : 

$('div .question').on("click",function() {
    var $answer = $(this).next('.answer');
    
    if ($answer.css('display') === 'none') {
        $answer.css({'display': 'block',});
    } else {
        $answer.css({'display': 'none',});
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<div id="q1">
  <p class="question">QUESTION1</p>
  <p class="answer">ANSWER1</p>
</div>

<div id="q2">
  <p class="question">QUESTION2</p>
  <p class="answer">ANSWER2</p>
</div>

Upvotes: 0

Prototype
Prototype

Reputation: 142

As said, the proper way to code is by using unique ID. A good way to do that is to use div in order to properly separate the questions and answers.

Here's a fiddle to show you a good way to do so. ( keep in mind that that is not the best way, just a better way ( and working one ) to do )

HTML

<h1 id="dictionaryTitle">Intrebari frecvente</h1>

<div id="q1">
  <p class="question">QUESTION1</p>
  <p class="answer" hidden>ANSWER1</p>
</div>

<div id="q2">
  <p class="question">QUESTION2</p>
  <p class="answer" hidden>ANSWER2</p>
</div>

JQUERY

$(function() {

  $('p').click(function(){
        $(this).next('p').show();
  });

});

DEMO

Upvotes: 0

Hodrobond
Hodrobond

Reputation: 1696

You could use the jQuery .next() to get the answer immediately after the question. You can also hide all of the answers before showing one using .hide()

$('.question').on("click",function() {
    $(".answer").hide();
    $(this).next().show();
});

jsfiddle

Upvotes: 0

Baro
Baro

Reputation: 5530

As told you gforce301, the ID must be unique, anyway you can use this solution:

$(document).ready(function() {
  $('.question').on("click", function() {
    if ($(this).next('.answer').css('display') === 'none') {
      $(this).next('.answer').css({ 'display': 'block' });
    } else {
      $(this).next('.answer').css({ 'display': 'none' });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="dictionaryTitle">Intrebari frecvente</h1>

<p class="question" id="q1">QUESTION1</p>
<p class="answer" id="q1">ANSWER1</p>

<p class="question" id="q2">QUESTION2</p>
<p class="answer" id="q2">ANSWER2</p>

Upvotes: 1

Alessandro
Alessandro

Reputation: 4472

You could put the "answers" inside the "questions", so you could show/hide those using:

$(this).find(".answer")

See following example please:

$('.question').on("click",function() {
    if ($(this).find('.answer').css('display') === 'none') {
        $(this).find('.answer').css({'display': 'block',});
    } else {
        $(this).find('.answer').css({'display': 'none',});
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<div class="question" id="q1">QUESTION1
  <p class="answer" id="q1">ANSWER1</p>
</div>
<div class="question" id="q2">QUESTION2
  <p class="answer" id="q2">ANSWER2</p>
</div>

I hope it helps you, bye.

Upvotes: 0

lpezzolla
lpezzolla

Reputation: 23

IDs should be unique in html anyway you can make it work using the following workaround

$('.question').on("click",function() {
    $id = "#"+$(this).attr('id');
if ($($id+'.answer').css('display') === 'none') {

        $($id+'.answer').css({'display': 'block',});
        }
        else {
            $($id+'.answer').css({'display': 'none',});
        }
});

Upvotes: 0

Joe Lissner
Joe Lissner

Reputation: 2473

You don't want to be keying this off of id, as they need to be unique. Instead, create an attribute for this purpose, then you can check those.

HTML

<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<p class="question" data-question="q1">QUESTION1</p>
<p class="answer" data-question="q1">ANSWER1</p>
<p class="question" data-question="q2">QUESTION2</p>
<p class="answer" data-question="q2">ANSWER2</p>

jQuery

$('.question').on("click", function() {
    $('.answer').css({'display': 'none',})
    $('.answer[data-question="' + $(this.attr('data-question') + '"]')).css({'display': 'block',});
});

So what we are doing here is when you click on a question, hide all answers, then show the answer where the data-question attribute matches the data-question attribute of the question.

Upvotes: 0

Related Questions