Happy G Happy G - 1 year ago 76
HTML Question

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.


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; ?>
<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>

jQuery Code is

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

Answer Source

$(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)--------------'
<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();