How to toggle between short and long text

Hi There,

I am a kirby newby and my knowledge is quite limited. I just put my personal website together using getkirby and love it. On my about/info page http://www.julienmchardy.info/info I want to be able to toogle between a short overview text and a longer text. I got it to work, but it only works the second time you click the link text (‘more or less about me’). I just can’t figure out why that is.

Here the template I am using for my info page

<?php snippet('header') ?> #myDIV { display: none; }
<?= $page->intro()->kirbytext() ?>
  <div id="myDIV">
    <?= $page->text()->kirbytext() ?>
  </div>
  <a onclick="myFunction()">More or less about me</a?>
<?php snippet('footer') ?>

The function is that I use to show the longer text is in loaded in the footer, which looks like this:

I would greatly appreciate any hints where I am going wrong.

Best,
Julien

uhps, the function in the footer looks like this:

<footer class="footer cf" role="contentinfo">
      </footer>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
</body>
</html>

Because the element gets ‘display: none’ when you click for the first time.

Apply the style directly within the element:

<div id="myDIV" style="display:none">
    <?= $page->text()->kirbytext() ?>
  </div>
  <a onclick="myFunction()">More or less about me</a?>

Dear Texnixe,

brilliant, you saved me another day of trial and error. Thank you so much.

Best,
Julien