0

I want to show a "...more" text for a long name descrition. so far I have this:

HTML:

<div class="teaser">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>

<div class="complete"> this is the 
complete text being shown</div>

<span class="more">more...</span>

CSS:

.complete{
    display:none;
}

.more{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
    float: right;
}
.teaser {
  height: 20px;
  width: 60%;
  overflow: hidden;
}

http://jsfiddle.net/y9ptsowb/

currently it floating towards to the extreme right, and I want to place it next to the where the sentence truncates based on the width and height I have added.- but I'm not able to figure out the bets way to handle this with CSS class. any ideas?

user1234
  • 3,000
  • 4
  • 50
  • 102

1 Answers1

1

Is this the result you are looking for?

$(".more").toggle(function(){
    $(this).text("less..");   
    $('.complete').show();
}, function(){
    $(this).text("more..");
        $('.complete').hide();
});
.wrapper {
  display: flex;
  align-items: flex-start;
}

.textContainer {
  display: flex;
  flex-direction: column;
    width: 60%;
}

.complete{
    display:none;
}

.more{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
}
.teaser {
  height: 20px;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="textContainer">
    <div class="teaser">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>
    <div class="complete"> this is the 
complete text being shown</div>
  </div>
  <span class="more">more...</span>
</div>
Tal Rofe
  • 457
  • 12
  • 46
  • thanks for the help- just a quick thing- I have a height set to 50px in the code which results the more text to float next to the first sentence and does not fall next to where the sentence ends- ex: http://jsfiddle.net/btoy6e8h/1/ any idea how to fix that? – user1234 Jan 05 '21 at 23:07
  • @user1234 I dont sure I understood you correctly, so try this on `.wrapper`: `.wrapper { display: flex; align-items: flex-end; }` – Tal Rofe Jan 06 '21 at 00:12