Hide/show certain UL elements?

Question

I'm trying to show part of the UL elements on click of one of the items with Javascript and CSS class "hiddenLi" (that is basically a display: none). They are hidden from the beginning, and onclick i want to show them and make the clicked item to dissapear. This is what i've tried until now:

function showButtons() {
  $(this).parent().siblings().find('.hiddenLi').removeClass('hiddenLi');
  //remove class from all LI
  $(this).parent().hide(); //hide the Li element
}

.hiddenLi {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noncollapsed" id="1" style="">
<p class="tagline">
    //usernames, dates, etc
</p>

<textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">Probando si comento reflota el post o queda abajo</textarea>

<ul class="flat-list buttons">
    <li>
        <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(1, 1)">➥ responder</a>
    </li>
    <li>
        <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(1);">☆</a>
    </li>
    <li>
        <a href="javascript:void(0);" id="btnExpandir" class="botonmagico">•••</a>
    </li>

    <li class="hiddenLi">
        <form class="toggle del-button " action="#" method="get">
            <input class="active" name="executed" value="deleted" type="hidden">
            <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton redtext botonmagico" title="Borrar comentario" onclick="return toggle(this, 1)">✖</a>
    </span>
            <span class="option error">
        borrar?  <a href="javascript:void(0)" class="yes" onclick="deleteComment(1)">si</a> / <a href="javascript:void(0)" class="no" onclick="return toggleback(this)">no</a>
    </span>
        </form>
    </li>
    <li class="hiddenLi">
        <a class="botonmagico" href="javascript:void(0)" onclick="return edit(1, 1)">editar</a>
    </li>
    <li class="hiddenLi">
        <a class="" href="javascript:void(0)" onclick="return distinguish(1, this)">undistinguish</a>
    </li>

    <li class="hiddenLi">
        <span class="option main active">
    <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 1)">reportar</a>
</span>
    </li>

    <li class="first hiddenLi">
        <a href="/v/DescargasAnime/1/1" class="bylink botonmagico" rel="nofollow">permalink</a>
    </li>

</ul>

</div>

<div class="entry unvoted">

<div class="noncollapsed" id="9" style="">
    <p class="tagline">
        //users, time, etc
    </p>

    <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">hola KPO sos mi eroe</textarea>

    <ul class="flat-list buttons">
        <li>
            <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(9, 1)">➥ responder</a>
        </li>
        <li>
            <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(9);">☆</a>
        </li>
        <li>
            <a href="javascript:void(0);" id="btnExpandir" class="botonmagico">•••</a>
        </li>

        <li class="hiddenLi">
            <span class="option main active">
    <a href="/v/DescargasAnime/1/9/delete" class="togglebutton redtext botonmagico" title="Borrar comentario">✖</a>
</span>
        </li>

        <li class="hiddenLi">
            <span class="option main active">
    <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 9)">reportar</a>
</span>
        </li>

        <li class="first hiddenLi">
            <a href="/v/DescargasAnime/1/9" class="bylink botonmagico" rel="nofollow">permalink</a>
        </li>

        <li class="hiddenLi">
            <a class="botonmagico" onclick="goToParent(event, 1)" href="/v/DescargasAnime/1/1" rel="nofollow">⬆ original</a>
        </li>
    </ul>

</div>
</div>

edit: it does work with J. Sadi code, but i forgot to tell that i'll have a lot of elements inside the page, since it is for the commenting section (one UL per comment), so it'll not work with removing all ".hiddenLi" or setting an id to the button

I do think i'm messing up with the javascript code. Did you guys have any clue what i'm doing wrong?

thank you!

Answer 1

If you want to use $(this) inside your function, you have to use jQuerys click-event, like i did here:

$('.btnExpandir').click(function() { // clickevent with jQuery
  $(this).parent().siblings('.hiddenLi').removeClass('hiddenLi'); //remove class from all LI
  $(this).parent().hide(); //hide the 'btnExpandir'-element
});

.hiddenLi {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="noncollapsed" id="1" style="">
  <p class="tagline">
    //usernames, dates, etc
  </p>

  <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">Probando si comento reflota el post o queda abajo</textarea>

  <ul class="flat-list buttons">
    <li>
      <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(1, 1)">➥ responder</a>
    </li>
    <li>
      <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(1);">☆</a>
    </li>
    <li>
      <a href="javascript:void(0);" class="botonmagico btnExpandir">•••</a>
    </li>

    <li class="hiddenLi">
      <form class="toggle del-button " action="#" method="get">
        <input class="active" name="executed" value="deleted" type="hidden">
        <span class="option main active">
            <a href="javascript:void(0)" class="togglebutton redtext botonmagico" title="Borrar comentario" onclick="return toggle(this, 1)">✖</a>
        </span>
        <span class="option error">
            borrar?  <a href="javascript:void(0)" class="yes" onclick="deleteComment(1)">si</a> / <a href="javascript:void(0)" class="no" onclick="return toggleback(this)">no</a>
        </span>
      </form>
    </li>
    <li class="hiddenLi">
      <a class="botonmagico" href="javascript:void(0)" onclick="return edit(1, 1)">editar</a>
    </li>
    <li class="hiddenLi">
      <a class="" href="javascript:void(0)" onclick="return distinguish(1, this)">undistinguish</a>
    </li>

    <li class="hiddenLi">
      <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 1)">reportar</a>
    </span>
    </li>

    <li class="first hiddenLi">
      <a href="/v/DescargasAnime/1/1" class="bylink botonmagico" rel="nofollow">permalink</a>
    </li>

  </ul>

</div>

<div class="entry unvoted">

  <div class="noncollapsed" id="9" style="">
    <p class="tagline">
      //users, time, etc
    </p>

    <textarea id="sourceDisplay" readonly="" class="commenttextarea" style="display: none;">hola KPO sos mi eroe</textarea>

    <ul class="flat-list buttons">
      <li>
        <a class="botonmagico" title="Responder" href="javascript:void(0)" onclick="return reply(9, 1)">➥ responder</a>
      </li>
      <li>
        <a class="savelink botonmagico" title="Guardar comentario" href="javascript:void(0)" onclick="return toggleSaveComment(9);">☆</a>
      </li>
      <li>
        <a href="javascript:void(0);" class="botonmagico btnExpandir">•••</a>
      </li>

      <li class="hiddenLi">
        <span class="option main active">
        <a href="/v/DescargasAnime/1/9/delete" class="togglebutton redtext botonmagico" title="Borrar comentario">✖</a>
    </span>
      </li>

      <li class="hiddenLi">
        <span class="option main active">
        <a href="javascript:void(0)" class="togglebutton report-button botonmagico" onclick="return getReportDialog(this, 'DescargasAnime', 'comment', 9)">reportar</a>
    </span>
      </li>

      <li class="first hiddenLi">
        <a href="/v/DescargasAnime/1/9" class="bylink botonmagico" rel="nofollow">permalink</a>
      </li>

      <li class="hiddenLi">
        <a class="botonmagico" onclick="goToParent(event, 1)" href="/v/DescargasAnime/1/1" rel="nofollow">⬆ original</a>
      </li>
    </ul>

  </div>
</div>