Making Inline for Website page content using HTML, CSS & JS

Question

Expected output:

I need first & second parapragh should be inline, which is my appropriate result.

Here what i tried in HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div> <div class="content1" style="display:inline"> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         <ul>
        <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
        <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    </ul> </div>
        <a class="show_hide" data-content="toggle-text">read more...</a>

CSS:

.content1{
      text-align: justify;
      
      font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 24px;
  }
  
   .content2{
      text-align: justify;
      
      font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 24px;
  }
  
  .inline{
       display: inline-block;
      
  }

Javascript:

    <script>
$(document).ready(function () {
    $(".content1").hide();
    $(".show_hide").on("click", function () {
        var txt = $(".content1").is(':visible') ? 'read more...' : 'read less';
        $(".show_hide").text(txt);
        $(this).prev('.content1').slideToggle(200);
    });
});
</scritp>

Here what i tried in Codepen: enter link description here

both content1 and content2 in same line than breaking into next line? — Manjuboyz
– Manjuboyz, Commented Jun 26, 2020 at 3:52
Please be more precise with what you want. Isn't it inline already? — Raul Marquez
– Raul Marquez, Commented Jun 26, 2020 at 3:52
kindly check codepen which i have sent, yes it is not inline — zab
– zab, Commented Jun 26, 2020 at 3:53

Manjuboyz · Accepted Answer · 2020-06-26 04:50:56Z

Add display:inline; to div.

fiddle to validate.

$(document).ready(function() {
  $(".content1").hide();
  $(".show_hide").on("click", function() {
    var txt = $(".content1").is(':visible') ? 'read more...' : 'read less';
    $(".show_hide").text(txt);
    $(this).prev('.content1').slideToggle(200);
  });
});

div {
  display: inline;
}

.content1,
.content2 {
  text-align: justify;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  line-height: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </div>
<div class="content1"> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
  the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br> when an unknown printer took a galley of type and scrambled it to make a
  type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
  recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <ul>
    <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
  </ul>
</div>
<a class="show_hide" data-content="toggle-text">read more...</a>

Lovesh Dongre · Accepted Answer · 2020-06-26 05:32:09Z

Update Codepen link Convert content1 and content2 to span instead of div

<body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <span class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span>
      <span class="content1" style="display:inline">
         when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br>
         when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         <ul>
            <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
            <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
         </ul>
        </span>
      <a class="show_hide" data-content="toggle-text">read more...</a>
   </body>

I added a code pen link, see if this is the desired result you want.

Collectives™ on Stack Overflow

Making Inline for Website page content using HTML, CSS & JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related