user3342042 user3342042 - 4 months ago 7
jQuery Question

Jquery - How to get part of a string with substr?

I have a problem to get part of a string with substr function from begining to second breakline not first. Then apply element with class to hide rest and with icon below text after click show long text or hide long text. Default is short text displayed. My problem is that it show string from begining to first breakline not second as I needed and after I click on icon it show only next part: one line of text not full. Can you please guys give me advice. I think it's problem inside text.indexOf('element'). Thank you very much.
PS: Sorry for my bad english

JsFiddle: example

JQuery:

$(".content_wrap").each(function() {
text = $(this).html();
if (text.length > 350) {
alert(text.indexOf('<br>'));
$('.cond-arr').show();
$(this).html(text.substr(0, text.indexOf('<br>')) + '<span class="elipsis" style="display:none;">' + text.substr(text.indexOf('<br>'), text.indexOf('<br>') + 1) + '</span><a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#"><img class="cond-arr" src="http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png" alt="arrow" /></a>');
$(".content_wrap > a.elipsis").click(function(e) {
e.preventDefault(); //prevent from being added to the url
if ($('span.elipsis').is(':hidden')) {
$('img.cond-arr').attr('src', 'http://png-5.findicons.com/files/icons/2222/gloss_basic/36/arrow_up.png');
} else {
$('img.cond-arr').attr('src', 'http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png');
}
$(this).prev('span.elipsis').fadeToggle(500);
});
} else {
$('.cond-arr').hide();
}
});


HTML:

<div>

<h2>Title</h2>
<span class="content_wrap">Something very long Something very long Something very long
<br />Something very long
Something very long Something very long Something very long Something
<b>very long Something very</b> long Something very long Something very long
Something very long Something very long Something very longSomething very long
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long <b>Something very long</b>
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
Something very long Something very long <strong>Something very long</strong>
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
<br />
<!-- Text after this break line should be hidden default and show only when i click icon below -->
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
Something very long Something very long Something very long Something very long
Something very long Something very long
</span>

</div>

Answer

Rather than indexOf, I think split is a better friend in this case:

var parts = text.split('<br>');
var shown = parts.slice(0, 2).join('<br>');
var hidden = parts.slice(2).join('<br>');

I modified your fiddle to use shown and hidden and it seemed to do what you want:

http://jsfiddle.net/QpuG8/

Comments