0

I'm working on creating a read more option for my articles. I've refer jQuery docs and tried out below way. But I want to hide the content inside .disp-cont class when read more clicked. and show it only when 'read less' clicked.

Please advice how to adjust below code

<div class="row">
                                        <div class="col-md-12"><strong>subject</strong></div>
                                        <div class="disp-cont col-md-auto">
                                             Lorem Ipsum is simply dummy text of the printing an
                                        </div>
                                        <div class="more-cont col-md-auto" style="display:none;">
                                          
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>
                                        <a href="#" class="more col-md-auto">read more</a>
                                   
                                    <div class="col-md-12">no record</div>
                                    
                                </div>

//Toggle Read more

   

$(document).ready(function () {
        $('.row .more').click(function(e) {
                 e.preventDefault();
            $(this).text(function(i, t) {
            return t == 'read less' ? 'read more' : 'read less';
            }).prev('.row .more-cont').slideToggle()
        });
    });
candish dd
  • 27
  • 4

2 Answers2

0

You should try below code:

$(document).ready(function () {
        $('.row .more').click(function(e) {
            e.preventDefault();
            
            if ($(this).text() == 'read more') {
                $(this).prev('.row .more-cont').show();
                $(this).prev('.row .disp-cont').hide();
            } else {
                $(this).prev('.row .more-cont').hide();
                $(this).prev('.row .disp-cont').show();                 
            }

            $(this).text(function(i, t) {
                return t == 'read less' ? 'read more' : 'read less';
            });
        });
    });
ShriHans
  • 89
  • 4
  • Why the `==` ? could `t` be a number? – Roko C. Buljan May 12 '21 at 18:04
  • A rule of thumbs is to avoid `.prev()` `.next()` whenever possible. A small change in the markup should not break the JS logic. Try always to first refer to a .closest() element element before traversing back into children. or rather use the better approach of *identifiers* using `data-*` attribute as a more robust solution. – Roko C. Buljan May 12 '21 at 18:06
  • I tried to extend his candish's current code to solve his problem. By seeing his HTML it seems that there will string always and text will be either "read more" or "read less". Please correct me if I did something wrong. – ShriHans May 12 '21 at 18:07
  • https://stackoverflow.com/questions/523643/difference-between-and-in-javascript – Roko C. Buljan May 12 '21 at 18:10
  • @RokoC.Buljan thanks for this. I understand the difference between == and === but can you please help me to make me understand what could be wrong here if we use == instead of === here ? :) – ShriHans May 12 '21 at 18:14
  • Think as a JavaScript interpreter. You see the `==` sign. What additional methods do you need to kick in to resolve this comparison? If you see `===` you know that the types are equal. `==` should be avoided at all costs. Always use `===` unless you're codegolfing and that extra bytes are on your way and you know exactly what you're doing. Now think as a developer, and your colleague wrote on line *n* this code `if (z == n) {` - now ask yourself how positive are you that the two types should be the same and the other developer knew exactly what he was after. Please, do some research. – Roko C. Buljan May 12 '21 at 18:21
  • Thank you for clarification. Got your point. Will keep in mind. Just researched about .toggle( boolean ). It is good to know it :) In fact we (most of us developer) sometimes missed many important things in documentation. Thanks again. – ShriHans May 12 '21 at 18:30
  • Thanks you both. Learnt a lot with this convo :) – candish dd May 12 '21 at 18:43
0

You can try toggle the "disp-cont" before the other "more-cont" shows;

So, it will create the look of switching between two contents.

Try the snippet below:

$(document).ready(function () {
    $('.row .more').click(function(e) {
             e.preventDefault();
             $( "#lessText" ).slideToggle()
        $(this).text(function(i, t) {
          return t == 'read less' ? 'read more' : 'read less';
        }).prev('.row .more-cont, .row .more-cont').slideToggle()
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="col-md-12"><strong>subject</strong></div>
   <div id="lessText" class="disp-cont col-md-auto">
      Lorem Ipsum is simply dummy text of the printing an
   </div>
   <div id="moreText" class="more-cont col-md-auto" style="display:none;">
      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>
   <a href="#" class="more col-md-auto">read more</a>
   <div class="col-md-12">no record</div>
</div>
StevenXXCCC
  • 268
  • 1
  • 3
  • 10
  • Glad my answer helped! – StevenXXCCC May 12 '21 at 18:15
  • small thing. when I applying this inside a loop it open all readmore not the one I clicked. please advice – candish dd May 12 '21 at 18:24
  • You have to be careful using "this" or a JQuery selector for class "$(" .more")" inside a loop. Make sure you have the correct element is selected. \n If you are using class selector, when you click on "readMore" it will trigger all elements with the same className. – StevenXXCCC May 12 '21 at 18:41
  • No worries at all. if you have a different issue, you are welcome to post another question and we will help you. – StevenXXCCC May 12 '21 at 18:44