Member Avatar for SimonIoa

Hello i want to put a shorten text-SeeMORE function inside another function

$(function() {
                var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)"; 
                $('.show').each(function() { 
                    var content = $(this).text(); 
                    if (content.length > showTotalChar) { 
                        var con = content.substr(0, showTotalChar); 
                        var hcon = content.substr(showTotalChar, content.length - showTotalChar); 
                        var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>'; 
                        $(this).html(txt); } }); 
                        $(".showmoretxt").click(function() { 
                            if ($(this).hasClass("sample")) { 
                                $(this).removeClass("sample"); 
                                $(this).text(showChar); 
                            } 
                            else { 
                                $(this).addClass("sample"); 
                                $(this).text(hideChar); 
                            } 
                            $(this).parent().prev().toggle(); 
                            $(this).prev().toggle(); 
                            return false; 
                        }); 
                    });

when i put it after the line that returns multiple values $.each(data, function(i,data){

it works OK as a function but returns multiple class="dots" and multiples Show (+) and i am guessing its because i put it after the each function. I tried to put it before $.each(data, function(i,data){ but the shorten text function doesnt work then. Also i tried to put it in another JS file still tha same. Any guess? Thanks

  • 2 Contributors
  • 4 Replies
  • 401 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by diafol

Recommended Answers

All 4 Replies

Member Avatar for diafol

No sure do you need all that hide once loaded via js. I'd leave it to CSS:

<?php
    $content = [
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim felis non ante tincidunt, ut vehicula
      massa sodales. Sed finibus, nulla id laoreet placerat, velit ante aliquam tellus, fermentum iaculis felis erat
      et massa. Quisque ut faucibus lectus, non elementum felis. Fusce vel nisl ex. Vivamus sem elit, pharetra in
      hendrerit in, fringilla in nibh. Nunc ut nunc sapien. Nulla consequat viverra tempus. Sed eget egestas velit.
      In lacinia, dui quis bibendum dignissim, dolor libero accumsan tortor, in malesuada eros enim et ligula.',

      'Etiam mattis tortor augue, nec maximus nunc scelerisque quis. Ut commodo eu sem nec lacinia. Ut tristique
      risus quis tortor lobortis, vel gravida purus porta. Quisque at est lorem. Proin faucibus pharetra quam at
      egestas. Donec euismod pulvinar leo, a condimentum leo laoreet non. Donec id magna purus. Fusce vel elit nibh.',

      'Pellentesque non lacus quis mi consequat porttitor. Praesent sit amet erat ipsum. Proin suscipit pellentesque leo
       at tincidunt. Sed sagittis ligula eget orci tristique, non vestibulum est egestas. Nam vitae aliquam libero.
       Pellentesque rutrum neque id dui ultrices, et sodales felis pretium'
    ];
$output = '';
    foreach($content as $item){
        //if(strlen($item))
        $preSplit = substr($item, 0, 200);
        $postSplit = substr($item, 200);
        $output .=  '<div class="article">'.$preSplit.'<span class="showtxt">&hellip; <a href="#">More (+)</a></span><span class="hidetxt hidden">'. $postSplit . ' <a href="#">Less (-)</a></span></div>';
    }
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <style>
      .hidden{
        display:none;
      }
  </style>

</head>
<body>
<?=$output?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $('.showtxt a').click(function(e){
        e.preventDefault();
        $(this).closest('.article').find('.hidetxt').show();
        $(this).parent().hide();
    });

    $('.hidetxt a').click(function(e){
        e.preventDefault();
        $(this).closest('.article').find('.showtxt').show();
        $(this).parent().hide();
    });

</script>
</body>
</html>

I've used PHP to populate the content, but it works as well with static markup. Probably an easier way to toggle, but just an example.

Member Avatar for diafol

BTW - forgot to mention - mb_substr() may be a safer option than substr().

Member Avatar for SimonIoa

still if i put it after the $.each(data, function(i,data){ it repeats...

Member Avatar for diafol

Perhaps it does. I wouldn't do it like that anyhow. Using js to hide stuff on a page load seems harsh. I'd much rather use css and then use js to interactively toggle display.

Edited by diafol
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.