Responsive design - A Read More button only on smaller screens

Question

We need to be able to limit the amount of text shown on a mobile device. We were hoping to do so in a similar way to the various 'Read More' plugins going around (http://plugins.learningjquery.com/expander/index.htm) where we call some JS on a div containing HTML elements.

The issue is, that we do not want to call these libraries on text on a large device. Is it possible to use media-queries in conjunction with some CSS, without introducing a new library (like Respond.js)?

Does anyone have any better approaches to limited text on a mobile device, and providing a read more link?

Edit: We are using media queries to already handle certain widths. But we would like to truncate a container with some text in it, in an intelligent fashion. If you're on a mobile device, and the div contains 1000 words, we would like to show 100 words, and then a "Read More" button that will expand the text. If you resize the window, this button and the truncating needs to seamlessly disappear.

What we have now is the following:

1. On page load, copy everything in the content div (the div containing the text we want to truncate) to a div above it.
2. Use max-width media queries to hide that content-div, and show the new one. Use some JS to truncate the text inside the new div element.
3. Append a button to end of new div that hides the new div, and shows the old one.

Is there a better way of handling this?

Answer 1

You can hide/show elements when page width is under a specified amount using CSS @media.

HTML:

<p>here is some content.</p>
<p id="extra_content" class="extra_content">here is some extra content</p>
<button id="read_more" class="read_more">Show More</button>

CSS:

@media (max-width: 650px) {
  .extra_content {
    display: none;
  }
  #read_more {
    display: block;
  }
}

.read_more  {
  display: none;
}

.show {
   display: block!important;
}

Pure JavaScript:

document.getElementById("read_more").addEventListener( 'click' , changeClass);

function changeClass() {
  var content = document.getElementById("extra_content");
  var btn = document.getElementById("read_more");
  content.classList.toggle('show');

  if (content.classList.contains("show")) {
      btn.innerHTML = "Show Less";
  } else {
      btn.innerHTML = "Show More";
  }
}

Here's a working example: http://jsfiddle.net/xfgqW/2/

Read more here: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

---

Using Multiple Buttons

To make this work with multiple buttons we need to modify things slightly. Basically we'll need to query for the button elements using a common class and loop over them to assign the click event and change the innerHtml. For example:

<button class="read_more">Show More</button>
<p>here is some content.</p>
<p class="extra_content">here is some extra content</p>
<button class="read_more">Show More</button>

document.querySelectorAll("button.read_more").forEach(function(button) {
  button.addEventListener( 'click' , changeClass);
});

function changeClass() {
  var content = document.getElementById("extra_content");
  var buttons = document.querySelectorAll("button.read_more");

  content.classList.toggle("show");

  var buttonText = content.classList.contains("show") ? "Show Less" : "Show More";

  buttons.forEach(function(button) {
    button.innerHTML = buttonText;
  });
}

Here's a working example with multiple buttons: https://jsfiddle.net/uc8d7w3e/1/