jQuery cut text without slicing words

Question

I know, this question has been asked several times, so apologies for repeating it, but I can't seem to find a solution to my question in those answers.

I have a selection of text that I want to cut after so many words, then on click, add the rest of the words back in - like an accordian style.

I have sliced the text in two and put them back together again using jQuery, but it's cutting words in half. I'd like it to cut off after the words. I'm not sure if the way I have done it is the best approach, so if anyone has any other ideas, or if they know how to cut off after the word, not in the middle that would be much appreciated.

$(".about__profiles--team .text").text(function() {
  var introText = $(this).text().substring(0, 150);
  var panelText = $(this).text().substring(150);

  $(this).html('<span class="accordion-button">' + introText + '</span><span class="panel">' + panelText + '</span>');
});

$('.accordion-button').click(function() {
  $(this).parent('#accordion').toggleClass('open-accordion');
});

.text {
  border-bottom: 1px solid black;
  padding-bottom: 30px;
  margin-bottom: 0;
  position: relative;
}

.accordion-button {
  transition: ease 0.4s;
  cursor: pointer;
  outline-style: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.accordion-button:before {
  content: '+';
  display: block;
  color: black;
  height: 10px;
  width: 10px;
  position: absolute;
  bottom: 10px;
  right: 0;
  transform: rotate(90deg);
  transition: ease 0.4s;
}

.panel {
    display: none;
    transition: ease 0.4s;
}

.open-accordion > .accordion-button:before {
  transform: rotate(-90deg) !important;
}

.open-accordion > .panel {
  display: inline !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="about__profiles--team">
  <h3 class="job-title">Title</h3>
  <h2 class="name">LOREM IPSUM</h2>
  <div class="text" id="accordion">Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris tri accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ul, consectetur adipiscing Mauris tristique eu orci ac sodales. Vestibulum id accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ultrices, id porta arcu viverra. Nunc pia enim, id egestas dolor bibendum nec.</div>
</div>

Thanks

Very difficult to capture precisely as each word will be different. In addition to Yotam dahan's idea, you can define three points of css. case study: https://stackoverflow.com/a/486571/6115840 As soon as it slides down, remove the css three point class, it can be added again when it slides up — ahmetarpaci, Jun 16 '20 at 08:02

Thallius · Accepted Answer · 2020-06-17T16:12:50.943

1

To just cut not in the middle of a word searh for the next space. So as the easiest way replace

var introText = $(this).text().substring(0, 150);
var panelText = $(this).text().substring(150)

with

var index = $(this).text().indexOf(' ', 150);
var introText = $(this).text();
var panelText = '';
if(index !== -1)
{
    var introText = $(this).text().substring(0, index);
    var panelText = $(this).text().substring(index+1);
}

Be aware that this is very basic. You can also split by ".", ",", "-" etc. And I am not sure if the 150 is the right choice at all

edited Jun 17 '20 at 16:12

answered Jun 16 '20 at 09:47

Thallius

2,482
2
18
36

Thanks for your suggestion Claus. I added that code but I'm getting an error - "Uncaught SyntaxError: Unexpected number" - can't quite figure out what's going wrong here. Any ideas? – Leanne Jun 17 '20 at 08:44
I am sorry there was one bracket too much. I edited it – Thallius Jun 17 '20 at 11:51

jQuery cut text without slicing words

1 Answers1