Issue with h2 tag within JQuery's read more feature

Question

Issue with h2 tag within JQuery's read more feature

How can I modify my jQuery code to wrap the middle text in an h2 tag?

I am currently using a code snippet from code-tricks. You can find the original code snippets here:

$(document).ready(function() {
  var showChar = 100;
  var ellipsestext = "...";
  var moretext = "Show more >";
  var lesstext = "Show less";


  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

.morecontent span {
  display: none;
}
.morelink {
  display: block;
}
.productdescription {
  font-weight: 400;
}
.productdescription h2 {
  font-weight: normal;
  font-size: 13px;
  margin: 0px;
  padding-top: 24px;
}
.productdescription strong {
  padding-bottom: 24px;
  float: left;
  width: 100%;
}
.productdescription ul {
  list-style-type: square;
  padding: 24px 0px 0px 15px;
}
.morecontent span {
  display: none;
}
.morelink {
  display: block;
}
.morelink {
  color: #4285f4;
  display: inline-block;
}
.morelink:hover {
  text-decoration: underline;
}
.less {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span class="productdescription more">
<strong>Produktdetails</strong> 
  
Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. Change this text to a headline h2. 
  
  

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</span>

javascript jquery html css

Answer 1

Answer №1

Place the following text within a tag that has an identifier:

<div id="newId">
Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. 

</div>

Afterwards, utilize jQuery .html()

$("#newId").html("<h2>Modify this text... </h2>");

Answer 2

Place the following text within a tag that has an identifier:

<div id="newId">
Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. Transform this text into a h2 heading. 

</div>

Afterwards, utilize jQuery .html()

$("#newId").html("<h2>Modify this text... </h2>");

Answer 3

Answer №2

This method offers a unique approach to implementing the hide/show more text feature without the need for Javascript. To achieve this, you'll have to get creative with your styling and positioning to achieve the desired look. I've put together a simple demonstration using a checkbox for toggling content visibility, leveraging the :checked CSS3 pseudo-class selector.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    #more {
  display: none;
}
label {
  float: right;
}
.morecontent {
  display: inline-block;
  height: 20px;
  width: 200px;
  overflow: hidden;
}
#more:checked ~ .morecontent {
  height: auto;
  overflow: visible;
}
label+label {
  display: none;
}
#more:checked + label {
  display: none;
}
#more:checked + label + label {
  display: inline;
}
.morecontainer {
  width: 250px;
}
.morecontent p {
  margin-top: 0;
}

<div class="morecontainer">

  <input type="checkbox" id="more" />
  <label for="more">...more</label>
  <label for="more">...less</label>
  <div class="morecontent">
    <p>This is the container that is supposed to have that more text functionality applied to it.</p>
    <ul>
      <li>This solution requires no Javascript.</li>
      <li>You can use a tiny little bit of JS for pure animation purposes.</li>
    </ul>
  </div>
</div>

Answer 4

This method offers a unique approach to implementing the hide/show more text feature without the need for Javascript. To achieve this, you'll have to get creative with your styling and positioning to achieve the desired look. I've put together a simple demonstration using a checkbox for toggling content visibility, leveraging the :checked CSS3 pseudo-class selector.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    #more {
  display: none;
}
label {
  float: right;
}
.morecontent {
  display: inline-block;
  height: 20px;
  width: 200px;
  overflow: hidden;
}
#more:checked ~ .morecontent {
  height: auto;
  overflow: visible;
}
label+label {
  display: none;
}
#more:checked + label {
  display: none;
}
#more:checked + label + label {
  display: inline;
}
.morecontainer {
  width: 250px;
}
.morecontent p {
  margin-top: 0;
}

<div class="morecontainer">

  <input type="checkbox" id="more" />
  <label for="more">...more</label>
  <label for="more">...less</label>
  <div class="morecontent">
    <p>This is the container that is supposed to have that more text functionality applied to it.</p>
    <ul>
      <li>This solution requires no Javascript.</li>
      <li>You can use a tiny little bit of JS for pure animation purposes.</li>
    </ul>
  </div>
</div>

Issue with h2 tag within JQuery's read more feature

Answer №1

Answer №2

Similar questions

HTML: arranged <pre> with fixed positioning

Creating impenetrable div elements with JavaScript or jQuery

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

Having trouble getting anime.js to function properly in an Ionic 3 project?

Effortlessly transfer files with Ajax through Box

Attempting to align content in the middle of the page across all web browsers

What is the reason for nth-of-type selectors not functioning on the third element?

How can I determine if a URL in react js includes a specific string?

jQuery.ajax Failure Response

What methods can I use to stop the styles of a child component from impacting those of the parent component

Embrace the words enveloped within large quotation marks

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

Template displaying multiple polymer variables side by side

In my Angular application, I have two div elements that I want to toggle between. When a button located in the first div is clicked, I need

Establishing a default value for sj:select

Experiencing a blank array when using filtering/search text in a Nodejs application with MongoDB

Utilizing jQuery tabs to dynamically load content via URL links

Text wrapped automatically to display multiple lines with spacing between each highlighted line

Creating animated direction indicators in the "aroundMe" style with ngCordova

Is it possible to transform this nested promise into a chain instead?