javascript - Show more button in html - Stack Overflow

admin管理员组

文章数量:1387434

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.

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.

• javascript
• php
• html

Share Improve this question Follow edited Nov 3, 2020 at 9:05 Dai 156k3030 gold badges303303 silver badges424424 bronze badges asked Nov 3, 2020 at 7:57 MdeGraaffMdeGraaff 12411 gold badge11 silver badge1212 bronze badges 3

• You don't need any JavaScript for this. Use <details><summary> instead. Browsers will render that as an expand/collapse widget. – Dai Commented Nov 3, 2020 at 8:02
• @Dai How can I use this to split my text so that the preview has 20 characters or so and the summary has the rest? – MdeGraaff Commented Nov 3, 2020 at 8:05
• Does this answer your question? show more/Less text with just HTML and JavaScript – Nico Haase Commented Nov 3, 2020 at 9:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

As per my ment, 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; ?>

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>

本文标签： javascriptShow more button in htmlStack Overflow