CODEWITHSUNDEEP
jquerytoggle
firefly
firefly

Reputation: 906

Changing table tr(th td) background color when toggle on

I have table tr and connect it to toggle. No problem with that. When I click it it's open another tr. For example when I click question tr it displays answer tr. But when answer toggle on. I want question background changes. But I couldn't figure out how to insert into current Jquery?

Any idea?

Jquery

$(document).ready(function(){
    $("#open1").click(function(){
        $("#tr-answer1").toggle();
    });
});

Html

<!-- Question! -->
                <tr class="question1">
                    <th><img src="img/question.png" class="Question"></th>
                    <td><span class="button-text">
                            sdfsdfsdfsdfsdf Some text
                        </span>
                        <span class="open-button-big">
                            <img src="img/open-button-big.png" class="open-button-big-class" id="open1">
                        </span>
                    </td>
                </tr>

                <!-- Answer Right Below! -->
                <tr id="tr-answer1">
                    <th><img src="img/answer.png" class="Question"></th>
                    <td>
                            Some text here too Some text here too Some text here too
                    </td>
                </tr>

I want to question1's background changes white to this #a0d6e1 when the toggle on. Really appreciate any help!

Upvotes: 0

Views: 74

Answers (1)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

Use toggleClass instead of toggle

add id q1 in quation tr and using id toggle class question1 

$(document).ready(function() {
  $("#open1").click(function() {
    $("#q1").toggleClass('question1');

  });
});
.question1 {
  background-color: #a0d6e1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr class="question1" id="q1">
    <th><img src="img/question.png" class="Question"></th>
    <td><span class="button-text">
                            sdfsdfsdfsdfsdf Some text
                        </span>
      <span class="open-button-big">
                            <img src="img/open-button-big.png" class="open-button-big-class" id="open1">
                        </span>
    </td>
  </tr>

  <!-- Answer Right Below! -->
  <tr id="tr-answer1">
    <th><img src="img/answer.png" class="Question"></th>
    <td>
      Some text here too Some text here too Some text here too
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions