CODEWITHSUNDEEP
javascriptjqueryhtml
Happy G
Happy G

Reputation: 59

jQuery on click toggle siblings

I am trying to toggle some arrows when i click a certain link, on click action is working but i cannot make the siblings to toggle.

Have any idea what am i missing.

Thanks

HTML code is :

<div class="box">
    <span class="info-box-title" >
            <i class="fa fa-thumbs-up"></i>
            <a class="toggle" href="#yeswebsite"> 
                <b>Website</b>: <?php echo $parsedJson1->website; ?>
            </a>
    </span>
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    <div id="yeswebsite" class="hidden">
        <p>Informatiile privind pagina ta cuprind si adresa de website. Aceasta trimite vizitatorii direct pe siteul tau pentru a afla mai multe informatii. </p>
    </div>
</div>

jQuery Code is

$("span>a.toggle").click(function () {
     console.log('it works');
     $(this).siblings(".arrow-up, .arrow-down").toggle();
});

Upvotes: 0

Views: 255

Answers (1)

Shaunak D
Shaunak D

Reputation: 20626

$(this).siblings(".arrow-up, .arrow-down") finds siblings of <a> and the required elements are siblings of the <span>.

<span class="info-box-title">
    <i class="fa fa-thumbs-up"></i> -------- $(this).siblings() <-+
    <a class="toggle"></a>         --------- $(this)--------------'
</span>
<div class="arrow-up">&#9650;</div>   ---- Required
<div class="arrow-down">&#9660;</div> ---- Required

Use .closest() to find the parent,

$(this).closest('span').siblings(".arrow-up, .arrow-down").toggle();

Upvotes: 1

Related Questions