Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 15, 2020 at 6:42 pm #1230683
    john_ma

    Hi there, I’m working on the team members page. As I don’t like the template provided (the head pictures are way too big on the mobile screen), so I’m just using a two-column layout, each column containing a text box, with the headshot picture set to a width of 180px and floating to the left of the bio text. Now some of the bio text are too long, and look bad next to a much shorter one. So I’m trying to insert a <read more> link to hide the rest of the text until someone clicks on it–so it will just expand and show the rest of the text. Is there a quick way to do it? I’m using the Text box container, so basically this has to be achieved with some CSS.
    Thanks,
    John

    July 15, 2020 at 7:47 pm #1230708
    john_ma

    By the way, I did try to add “more” link to the text in ALB. Somehow I only got the <span id=”more-1212″></span> empty tags in the resulted output. The text after the <more>link wasn’t incorporated. I also tried to manually put the text into the span tags, but that was stripped too.

    July 15, 2020 at 9:03 pm #1230722
    john_ma

    OK again I found a solution. Kind of. The source is here
    The problem: I got the <span> tags work to hide the text–it’s not pretty, as I have to put them manually for EVERY paragraph. But when I put the function in the child theme functions.php, it broke the site.
    C’mon WP! Can’t a bro have some luck adding such a simple JS?

    July 15, 2020 at 10:30 pm #1230764
    john_ma

    OK I figured it out. Just add the following to functions.php. I’m learning fast…

    /**
	 * read-more button in text box by JMa-202007
	 * 
	 * Add to child theme functions.php
*/

function myMoreFunction(){
?>
<script>
function jmaMoreFunction() {
  var dots = document.getElementById("more-dots");
  var moreText = document.getElementById("jmaMore");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "⇳";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "⇪";
    moreText.style.display = "inline";
  }
}
</script>
<?php
}
add_action('wp_head', 'myMoreFunction');
    July 15, 2020 at 10:32 pm #1230765
    john_ma

    Dear Enfold,
    One question: How do I stop ALB to strip my <span>tags, button onClick functions, … from the text box output? It seems to be a code cleaning, but I’d really like to keep the modficications.
    Thanks,
    John

    July 16, 2020 at 4:21 am #1230785
    john_ma

    One more problem: Since the item id is unique, when there’s more than one such buttons on the same page, it works only for the first button to hide/show the text…
    Help please!
    John

    July 17, 2020 at 11:12 am #1231179
    Victoria

    Hi John,

    You need to use the buttons classes instead of id.

    Yes, the Advanced Layout Builder stips html tags in most cases.

    You can add external JavaScript’s using the button classes and the page-id classes.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.