CODEWITHSUNDEEP
jqueryhtmlcssslidetoggle
PeetZ
PeetZ

Reputation: 89

JQuery Hide element and children

I am trying to make a FAQ on a website. It works perfectly, however, one answer contains a table, that won't hide when clicked on the question.

How can I adjust my JQuery code to make it disappear when I click on the question?

My code:

HTML:
    <section class="faqs sections">
            <h1>Frequently asked Questions</h1>
            <p class="question">question1?  </p>
            <p class="answer">blabla  </p>

            <p class="question">question2?  </p>
            <p class="answer">Bla Bla --> See table:
                <table>
                <tr><td>Info</td><td>Text</td></tr>
                <tr><td>Info</td><td>Text</td></tr>
                </table>
            </p>
    </section>

CSS:
.question {
      color: #009fdb;
      display: block;
      font-size: 12px;
      margin: 15px 0 5px;
      width: 100%;
}

.question:hover{
    cursor: pointer;
}

.answer {
    display: none;
}

JQuery:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $('.faqs .question').append('<span class="plus">+</span>');

    $('.faqs .question').click(function() {
        $(this).next('p').slideToggle('fast');
        question = $(this);
        if (question.children().hasClass('plus'))
            $(this).find('.plus').replaceWith('<span class="minus">-</span>');
        else
            $(this).find('.minus').replaceWith('<span class="plus">+</span>');
    });
  </script>

Upvotes: 0

Views: 40

Answers (1)

charlietfl
charlietfl

Reputation: 171679

The problem is <table> is invalid child of <p> so it is being moved out of that <p> by the browser

You can see this for yourself when you inspect the live html in browser dev tools element inspector

Use <div> as parent instead

DEMO

Upvotes: 2

Related Questions