Question

I have been trying to figure this out and probably asked the same question for the fifth time.
Some day I will loose my mind. Any way

Here is what I am doing

I have four tabs. The contents in the tabs are dynamically generated. Sometimes they are very long and messes with page layout. So I am doing this to restrict them upto 540 charecters

<script>
$(function(){
    var myDivThree = $('#pdpTab6');
    myDivThree.html(myDivThree.html().substring(0,540));
    $(myDivThree).append('<div id="readThree">Read More</div>');
    //this is what I am doing to show the extra content
    $('#readThree').click(function(){
        $('#popThree').show();
    });
    $('.closePop').click(function(){
        $('#popThree').fadeOut();
    })
});
</script>

The weird thing is If a tab contains less than 540 charecters I see read more twice. I would prefer if a tab contains less than 540 charecters not to run the script at all. Am i day dreaming or is it doable?

Answer 1

<script>
$(function(){
    var myDivThree = $('#pdpTab6');
    if (myDivThree.html().length>540){
        myDivThree.html(myDivThree.html().substring(0,540));
        $(myDivThree).append('<div id="readThree">Read More</div>');
       //this is what I am doing to show the extra content
    }

    $('#readThree').click(function(){
        $('#popThree').show();
    });
    $('.closePop').click(function(){
        $('#popThree').fadeOut();
    })
});
</script>