Nie działający JS zgody

Question

Cześć dostałem taki kod do wklejenia od (Deva klienta) w elementorze - rozwijac ma się tekst zgody po kliknieciu w Więcej, ale za cholewkę nie działa po wklejeniu - nie bardzo wiem jak to naprawić. Próbowałem stad https://www.w3schools.com/w3css/w3css_dropdowns.asp  coś pokombinować ale nie ogarniam tej kuwety. Pomożecie?

<div class="consent-box-short">
<div class="form-group">
<input id="consent" type="checkbox" name="consent" required="">
<label for="consent"></label>
</div>
                    
<label for="consent">
Wyrażam zgodę na przetwarzanie danych przez XXXXX.
</label>
<span class="show-consent">(Więcej) <strong>*</strong></span>
</div>

<div class="agree_text_full" style="display: none;">
Wyrażam zgodę na przetwarzanie przez XXXXXXX.
</div>

$(function() {
$(".show-consent").click(function(e) {
$(this).parents( "div" ).closest('.consent-box').find('.agree_text_full').toggle( "slow" );
});
});

 

Comments

No skoro nie działa jak powinno to niech dev poprawi. Płacone ma za to według mnie. Chyba, że jest drugie dno i robisz zlecenie z którym nie możesz sobie poradzić

---

On nic nie zrobi, pisał wczęśniej klientowi strone w Html( administruje serwery i jakies tam akcje it ogarnia przy okazji  napisał im www) l i zgarniał hajs za każdą aktualizację - klient zdecydował się przenieść strone na WP żeby wszyscy mogli edytować, on mi  na niby pomaga :-) bo jest teraz konsultantem  po stronie klienta :-( Akurat z tym sobie nie radzę, składam klocki elementorowe sprawnie i tyle, klient chce mieć tą rozwijaną zgodę, do tego jest jeszcze agencja SEO i graficzna i oni tez naciskają ze względu UX na ta zgodę. taka sytuacja. pomozesz?

Answer 1

Brakowało nadrzędnego diva o klasie “consent-box” oraz była literówka w “show”.

codepen

Comments

Dzięki !!! :-)

A czy możesz pomóc jeszcze na finał (i podpowiedzieć co dalej robię źle) ? Wkleiłem jak niżej i niestety dalej nie hula...

 

<div class="consent-box">
  <div class="consent-box-short">
    <div class="form-group">
      <input id="consent" type="checkbox" name="consent" required="">
      <label for="consent"></label>
    </div>

    <label for="consent">
      Wyrażam zgodę na przetwarzanie danych przez XXXXX.
    </label>
    <span class="show-consent">(Więcej) <strong>*</strong></span>
  </div>

  <div class="agree_text_full" style="display: none;">
    Wyrażam zgodę na przetwarzanie przez XXXXXXX.
  </div>
</div>
<script>
$(function() {
$(".show-consent").click(function(e) {
$(this).parents( "div" ).closest('.consent-box').find('.agree_text_full').toggle( "show" );
});
});
</script>

 

 

---

Potrzebujesz jeszcze skryptu z jQuery, np.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

I zmień sobie to “show” z powrotem na “slow”.

Answer 2

.toggle()

 

With no parameters, the .toggle() method simply toggles the visibility of elements

Ostatnią metodę toggle zostaw "pustą"

$(function() {
  $('.show-consent').click(function() {
    $(this).parents('div').closest('.consent-box').find('.agree_text_full').toggle();
  });
});

możesz skrócić zapis

$(function() {
  $('.show-consent').click(function() {
    $('.consent-box').find('.agree_text_full').toggle();
  });
});

lub

$(function() {
  $('.show-consent').click(function() {
    $('.agree_text_full').toggle();
  });
});

 

@overcq

oraz była literówka w “show”

nie ma żadnej literówki .toggle() m. in. "posiada" parametr "slow"

[ on-line ]

$(function() {
  $('.show-consent').click(function() {
    $('.agree_text_full').toggle('slow');
  });
});

 

Comments

Rzeczywiście, nie sprawdziłem. :)