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!

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

B'coz you toggle #tr-answer1 thats why its toggle answerinstead of question tr

– Bhargav Chudasama
Nov 19 '18 at 7:59

I am trying to open/close toggle answer. But try to change color on question.

– Snickers
Nov 19 '18 at 8:02

add a comment |

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!

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

B'coz you toggle #tr-answer1 thats why its toggle answerinstead of question tr

– Bhargav Chudasama
Nov 19 '18 at 7:59

I am trying to open/close toggle answer. But try to change color on question.

– Snickers
Nov 19 '18 at 8:02

add a comment |

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!

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

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!

jquery toggle

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

edited Nov 19 '18 at 8:29

asked Nov 19 '18 at 7:50

Snickers

372111

asked Nov 19 '18 at 7:50

Snickers

372111

asked Nov 19 '18 at 7:50

Snickers

372111

B'coz you toggle #tr-answer1 thats why its toggle answerinstead of question tr

– Bhargav Chudasama
Nov 19 '18 at 7:59

I am trying to open/close toggle answer. But try to change color on question.

– Snickers
Nov 19 '18 at 8:02

add a comment |

B'coz you toggle #tr-answer1 thats why its toggle answerinstead of question tr

– Bhargav Chudasama
Nov 19 '18 at 7:59

I am trying to open/close toggle answer. But try to change color on question.

– Snickers
Nov 19 '18 at 8:02

B'coz you toggle #tr-answer1 thats why its toggle answerinstead of question tr

– Bhargav Chudasama
Nov 19 '18 at 7:59

I am trying to open/close toggle answer. But try to change color on question.

– Snickers
Nov 19 '18 at 8:02

add a comment |

1 Answer
1

active

oldest

votes

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>

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370360%2fchanging-table-trth-td-background-color-when-toggle-on%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

|
show 1 more comment

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>

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

|
show 1 more comment

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>

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

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>

$(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>

$(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>

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

answered Nov 19 '18 at 8:02

Bhargav Chudasama

4,3482925

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

|
show 1 more comment

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

it solving color problem but this time it doesn't toggle answer!?

– Snickers
Nov 19 '18 at 8:04

How can I make background color white to #a0d6e1 not #a0d6e1 to white

– Snickers
Nov 19 '18 at 8:14

you toggle answer? @Snickers

– Bhargav Chudasama
Nov 19 '18 at 9:00

How can I make background color white to #a0d6e1 not #a0d6e1 to white just remove class name from question tr question1

– Bhargav Chudasama
Nov 19 '18 at 9:01

Thank you! Solved the problem!

– Snickers
Nov 19 '18 at 9:04

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk