WP eenvoudige plugin accordeon probleem

[damnsharp]

Hoi,
Ik heb een eenvoudige WP plug-in gemaakt n.a.v. w3schools voorbeeld.
Alleen de accordeon klapt niet open als ik op de regels klik.
Ik mis vast ergens iets, maar wat...

De code is goed want als ik die in codepen.io invoer werkt het prima.


Ok, hier de code.
In een WP pagina plaats ik de HTML code:

 <button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

De plug-in ziet er zo uit: naam-accordion.php

//registering javascript and css
wp_register_script ( 'script', plugins_url ( 'js/accordeon.js', __FILE__ ) );
wp_register_style ( 'stijl', plugins_url ( 'css/style.css', __FILE__ ) );

wp_enqueue_script('script');
wp_enqueue_style('stijl');

css/style.css

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

js/script.css

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

Het JS bestand wordt goed aangeroepen want als ik er wat andere testcode in plaats zoals een pop-up tonen zie ik dat wel.

Bedankt voor meedenken!

 

[Aar]

En kan je iets in de JavaScript debugger in je browser zien?

 

[damnsharp]

@php4u nee helemaal niets, ik kan klikken maar gebeurd niets.

Ik denk dat ik wat moet toevoegen vanwege een WP website; omdat het bij codepen.io (en w3schools) wel zo werkt.

 

[damnsharp]

Heb het gevonden.
WP zet er automatisch <p></p> tussen de code dus WP maakt ervan:

<p><button class="accordion">Section 1</button></p>

Maar het moet zijn:

<button class="accordion">Section 1</button>

Bij de codepen.io werkt het niet met <p></p> ertussen. Dus ik ga weer even aan de slag, moet even uitzoeken hoe ik het dan bij WP zonder die paragraaf erbij zet. Hopelijk werkt het dan wel.

 

[bron]

Misschien heb je al een oplossing gevonden? Of anders verder met deze code.

<p><button class="accordion">meer info</button></p>
<div class="panel">
  <p>Lorem ipsum...</p><p>Lorem ipsum...</p>
</div>

<p>Druk op <button class="accordion">meer info</button> voor details</p>
<div class="panel">
  <p>Lorem ipsum...</p><p>Lorem ipsum...</p>
</div>

<p><button class="accordion">meer info</button></p>
<div class="panel">
  <p>Lorem ipsum...</p><p>Lorem ipsum...</p>
</div>

<script>
var i, acc = document.querySelectorAll(".accordion");
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function(event) {
        var panel = this.parentNode.nextElementSibling;
        panel.classList.toggle("open");
        if (panel.classList.contains("open"))
            this.classList.add("active");
        else
            this.classList.remove("active");
    });
}
</script>

Met css

.accordion:after {
    /* Unicode "plus" sign (+) */
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}
.accordion.active:after {
    /* Unicode "minus" sign (-) */
    content: "\2796";
}
.accordion.active,
.accordion:hover {
    background-color: #ccc;
}
.panel {
    height: 0;
    padding: 0 18px;
    background-color: yellow;
    overflow: hidden;
}
.panel.open {
    height: auto;
}

 

[damnsharp]

@bron bedankt voor je aanvulling!

En daardoor ben ik nu een stap verder. Want als ik de javascript in de pagina erbij plaats of in een pagina template in de code erbij zet werkt het wel.
Als het script alleen in het js/script.js bestand staat wat ik aanroep via volgende code in de plug-in code werkt het niet...

//registering javascript and css
wp_register_script ( 'script', plugins_url ( 'js/accordeon.js', __FILE__ ) );
wp_register_style ( 'stijl', plugins_url ( 'css/style.css', __FILE__ ) );

wp_enqueue_script('script');
wp_enqueue_style('stijl');

 

[bron]

wp script invoegen heb ik niet eerder gedaan. Heb je de eerste regel getest met

$tmp = wp_register_script ( 'script', plugins_url ( 'js/accordeon.js', __FILE__ ) );
if ($tmp) echo 'register ok'; else echo 'register niet ok';

Is het bestand te vinden als root/js/accordeon.js ?

Misschien een iets "meer unieke naam" verzinnen dan 'script'

Aanvulling:
Omdat je vanilla javascript gebruikt kan het beter in de footer staan omdat dan de elementen bekend zijn voor het script.

// laatste true bij wp_enqueue_script betekent "zet script in footer"
wp_enqueue_script('myscript', plugins_url ('js/accordeon.js', __FILE__), array(), false, true);
wp_enqueue_style ('mystyle',  plugins_url ('css/style.css', __FILE__),   array(), false, 'all');

 

[damnsharp]

Bedankt @bron! Ik krijg melding register ok.
Heb ze in footer geplaatst (goede tip) maar zelfde resultaat.

Misschien moet ik toch maar gaan zoeken naar andere software (lees een plug-in) en die dan gebruiken. Weet nu toch eigenlijk niet meer wat ik kan doen.
Hè het leek me zo'n leuk en eenvoudig te doen idee.
Nou nog even nadenken.

 

[Aar]

Hoe voeg je die code dan in je HTML-site in? Via een shortcode?

 

[damnsharp]

@php4u ik voer het via html in maar ook geprobeerd met een template dus dan in een test-pagina.php met code.

Heb als test nu een "Simple Custom CSS and JS" plug-in toegevoegd waar je stukjes code kan plaatsen. Als ik daar de JS code toevoeg werkt het wel...
Lijkt er dan toch op dat het met de manier van aanroepen JS code te maken heeft.