How to Show Just the First Line of Text of a Div and Expand on Click

How do you show just the first line of text of a div and expand on click?

Assuming that you don't want to use any JavaScript library (which is odd).

See: http://jsfiddle.net/JUtcX/

HTML:

<div id="content"></div>

CSS:

#content {
    border: 1px solid red;
    height: 1em;
    padding: 2px; /* adjust to taste */
    overflow: hidden    
}

JavaScript:

document.getElementById("content").onclick = function() {
    this.style.height = 'auto';
}

Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.

See: http://jsfiddle.net/JUtcX/2/

$('#content').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).animate({height: fullHeight}, 500);
});

Show first line in table row then expand or collapse on click and change + sign to - sign

You may do it in many ways. This is one:

$('.expand').each(function(){    var reducedHeight = $(this).height();    $(this).css('height', 'auto');    var fullHeight = $(this).height();    $(this).height(reducedHeight);        $(this).data('reducedHeight', reducedHeight);    $(this).data('fullHeight', fullHeight);}).click(function() {    $(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);    $(this).find('.expand_sign, .collapse_sign').toggleClass('hidden');});

.expand {    border: 1px solid red;    height: 1em;    padding: 2px;    overflow: hidden    }.hidden { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="content" class="expand"><a class="expand_sign">[+]</a><a class="collapse_sign hidden">[-]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.</div>

Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable

there was a related bug and it's already fixed

http://code.google.com/p/chromium/issues/detail?id=81783

Expand rest of the div to show the full content (onClick with buttons)

Here is a simple example, using jQuery.

The example uses two different types of open/close triggers, so that you can see a couple of options. Note how CSS is used to create the second button.

$('button, .smallx') means that both the button element and the element with class="smallx" are watched for user click events.

When either one of these is clicked, we search back up the DOM tree to the first element with class .container, then from there were search for an element with class content. We assign that element to a variable called "box". The rest is self-explanatory (just adding/removing a class).

$('button, .smallx').click(function(){  let box = $(this).closest('.container').find('.content');  if ( box.hasClass('collapsed') ){    box.removeClass('collapsed');  }else{    box.addClass('collapsed');  }});

*{position:relative;}.container{max-width:300px;margin-bottom:20px;overflow:hidden;}.collapsed{max-height:50px;}
.smallx{position:absolute;top:3px;right:3px;padding:3px;border:1px solid dodgerblue;cursor:pointer;z-index:1;}.smallx:hover{border:1px solid green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">  <button class="collapsible">Title 1</button>  <div class="content collapsed">  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </div></div>
<div class="container">  <div class="smallx"> X </div>  <div class="content collapsed">  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </div></div>

Show first line of a paragraph

~~There is not an outright way to do this by specifying the first line.~~ I would suggest changing the height of the DIV using CSS to only show the first line. It would seem to me to be the simplest solution. If you then want to change to show the whole line with javascript just use it to change the height of the DIV back to 100%.

EDIT: I stand corrected, I was not aware that there was a first-line pseudo class. However changing the height may still be the simplest way.

css overflow - only 1 line of text

If you want to restrict it to one line, use white-space: nowrap; on the div.

Expand a div that has a preview of its contents using Jquery

You need something like this :
HTML:

<ul>
   <li class="line">Line one</li>
   <li class="line">Line two</li>
   <li class="line">Line three</li>
   <li class="line">Line four</li>
   <li class="line">Line five</li>
   <li class="showMore">Show More</li>
</ul>

CSS:

.line:nth-child(n+3) {
   display:none;
}
.showMore{
  cursor:pointer;
  font-size:12px;
  color:blue;
}

JQuery:

$(document).ready(function() {
  $('.showMore').click(function() {
      $('ul li:gt(1)').show();
      $(this).hide();
  });
});

Show first ten characters, expand on click (or hover)

Here is a pure CSS solution. It's a bit clumsy, but jquery not required

pre {    width: 10em;    height: 1em;    overflow: hidden;    white-space: pre;    text-overflow: ellipsis;    background-color: lightgreen;    border-radius: 8px;    border: 2px solid #6c6;    transition: width 1s ease;}pre:hover {    width: 100%;    height: auto;    overflow: auto;    text-overflow: clip;}

<pre>Traceback (most recent call last):  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log    output = self._execute_job_and_create_log()  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log    return self.execute_job_and_create_log__ftp()  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp    return self._execute_job_and_create_log__ftp()  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp    port=self.job_group.remote.port, session_factory=SessionOnPort) as host:  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__    self._session = self._make_session()  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session    session = factory(*args, **kwargs)  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__    raise FTPOSError(*exc_value.args, original_exception=exc_value)FTPOSError: [Errno 110] TimeoutDebugging info: ftputil 3.4, Python 2.7.13 (linux2)</pre>

How to add new Class to only First DIV, In this JS structure

Try adding an index and then using tha to conditonally add the class first

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("\n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line,i) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = i===0 ? 
    `<div class="quiz answer">${encodedLine}</div>` :
    `<div class="quiz">${encodedLine}</div>`
    
    innerDiv.innerHTML += newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});