Show more button in html

Question

How can I make a show more button in HTML? I'm importing some text trough a variable in how do I make it so that like 20 characters are being showed and the rest will be showed once the button is pressed. This is what I have now:

$array = explode("<br>", $array_build->content);
foreach( $array as $key => $value){
    if (
        strpos(strtolower($value),'value1') !== FALSE ||
        strpos(strtolower($value),'value2') !== FALSE ||
        strpos(strtolower($value),'value3') !== FALSE ||
        strpos(strtolower($value),'value4') !== FALSE
    ) {
        unset($array[$key]);
    }
};

$newcontent = "<pre>".implode("\n",$array)."</pre>";
?>

<div style="margin-top: 50px;"></div>
<style>
.button {
    border-radius: 4px;
    background-color: #002B56;
    color: white;
    padding: 14px 40px;
    }
</style>
<div style="text-align: center;">

<script type="text/javascript">
function toggle(obj) {
          var obj=document.getElementById(obj);
          if (obj.style.display == "block") obj.style.display = "none";
          else obj.style.display = "block";
}
</script>
<a class="button" href="javascript: void(0);" onClick="toggle('q1')">
Show More
</a>
<div style="margin-top: 50px;"></div>
<div id="q1" style="display:none;">
<div class="col" style="width: 100%;"><?= $newcontent ?></div>
</div>
</div>

Output I want:

Lorem ipsum dolor sit amet.

SHOW MORE

consectetur adipiscing elit. Integer tellus erat, tempor quis dolor a, gravida eleifend leo. Orci varius.

Answer 1

As per my comment, here's a working example without any JavaScript, using <details><summary>.

How can I use this to split my text so that the preview has 20 characters or so and the summary has the rest?

Note how the first few words are in the clickable <summary> element, while the rest is outside:

details > summary {
    float: left; /* This makes the <summary> appear inline, as `display: inline` won't work here. */
    cursor: pointer; /* Show the hand cursor. */
    margin-right: 0.25em; /* Needed otherwise the space disappears, alternatively use `&nbsp;` at the end of the summary */
}

<details>

    <summary>Lorem ipsum dolor sit amet</summary> consectetur adipiscing elit.
    Integer molestie diam sit amet scelerisque rhoncus. Sed arcu magna, fermentum
    nec hendrerit non, vestibulum nec enim. Nulla orci justo, hendrerit sit amet
    semper et, ullamcorper quis ipsum. Etiam a justo sed augue elementum accumsan
    non id neque. Vivamus volutpat interdum nunc non ultricies. Interdum et
    malesuada fames ac ante ipsum primis in faucibus. Nullam justo lacus, sodales
    quis blandit non, feugiat ut lacus. Phasellus tempus sodales dui, eu auctor
    elit. Nam fermentum ipsum in posuere luctus. Maecenas volutpat posuere diam,
    ut laoreet orci iaculis et.

</details>

---

Re: PHP

As you're using PHP to render the HTML, use PHP's strpos and substr to get the point in the string where it's safe to split (in this case: it looks for the first space character after character 20):

<?php

    // This PHP code is very verbose so you can understand how it works. It can be made much more shorter and succinct if necessary.

    $newcontent = "Lorem ipsum dolor...";

    $newcontentSummary   = '';
    $newcontentRemaining = '';

    $newcontentSummaryEndIdx = strpos( $newcontent, ' ', 20 );
    if( $newcontentSummaryEndIdx !== false ) {
        $newcontentSummary   = substr( $newcontent, 0, $newcontentSummaryEndIdx );
        $newcontentRemaining = substr( $newcontent, $newcontentSummaryEndIdx );
    }
?>

[...]

<?php if( $newcontentRemaining ): ?>
<details>
    <summary><?= htmlentities( $newcontentSummary ) ?></summary>
    <?= htmlentities( $newcontentRemaining ) ?>
</details>
<?php else: /* The $newcontent string is too short, so just render it directly: */ ?>
<p><?= htmlentities( $newcontent ) ?></p>
<?php endif; ?>

Answer 2

I think, you need to work with overflow and white-space attributes.

Here an examples based on your code:

.button {
    border-radius: 4px;
    background-color: #002B56;
    color: white;
    padding: 14px 40px;
}
.text-container{
    margin-top:20px;
    width:350px;
    display:inline-block;
  }
  .text-hidden{
     white-space: nowrap; 
     overflow: hidden;
     text-overflow: ellipsis; 
     width:210px;
  }

<div style="text-align: center;">

<script type="text/javascript">
function toggle(obj) {
      var obj=document.getElementById(obj);
  
      if (obj.classList.value.split(' ').includes("text-hidden")) 
        obj.classList.remove('text-hidden');
      else 
        obj.classList.toggle('text-hidden');
}
</script>
<a class="button" href="javascript: void(0);" onClick="toggle('q1')">Show More</a>
  <div>
<span id="q1" class="text-container text-hidden" >
   Lorem ipsum dolor sit amet.
  Consectetur adipiscing elit. Integer tellus erat, tempor quis dolor a, gravida eleifend leo. Orci varius.
</span>
</div>
  
</div>