Actually I'm using laravel
framework.In which I use certain queries and methods to retrieve data from database..
And its my code below
<ul class="booking-list">
@foreach($aRooms as $aRoom)
<li>
....
<div class="comment more">
{{$aRoom->room_desc}}
</div>
....
</li>
@endforeach
</ul>
There are many contents to display like {{$aRoom->room_desc}}
.But by using this {{$aRoom->room_desc}}
I have to set the Read more
Read less
toggle option.
I don't know how to set that using jQuery,if the data is from database
And here is my jQuery,
<script>
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "More (+)";
var lesstext = "Less (-)";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">'+moretext+'</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
Thanks,
I got it..using this link
<ul class="booking-list">
@foreach($aRooms as $aRoom)
<li>
....
<div class="comment more">
@if(strlen($aRoom->room_desc) > 100)
{{substr($aRoom->room_desc,0,100)}}
<span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
<span class="read-more-content"> {{substr($aRoom->room_desc,100,strlen($aRoom->room_desc))}}
<span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>
@else
{{$aRoom->room_desc}}
@endif
....
</li>
@endforeach
</ul>
Javascript
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
$('.read-more-content').addClass('hide_content')
$('.read-more-show, .read-more-hide').removeClass('hide_content')
// Set up the toggle effect:
$('.read-more-show').on('click', function(e) {
$(this).next('.read-more-content').removeClass('hide_content');
$(this).addClass('hide_content');
e.preventDefault();
});
// Changes contributed by @diego-rzg
$('.read-more-hide').on('click', function(e) {
var p = $(this).parent('.read-more-content');
p.addClass('hide_content');
p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"
e.preventDefault();
});
</script>
And for this I use some style in css file
<style type="text/css">
.read-more-show{
cursor:pointer;
color: #ed8323;
}
.read-more-hide{
cursor:pointer;
color: #ed8323;
}
.hide_content{
display: none;
}
</style>
you can do these without using javascript also.
<?php
$longString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
echo readMoreHelper($longString);
function readMoreHelper($story_desc, $chars = 100) {
$story_desc = substr($story_desc,0,$chars);
$story_desc = substr($story_desc,0,strrpos($story_desc,' '));
$story_desc = $story_desc." <a href='#'>Read More...</a>";
return $story_desc;
}
?>
**// OR**
<?php
$story_desc = substr($longString,0,100);
$story_desc = substr($story_desc,0,strrpos($story_desc,' '));
echo $story_desc."<a href='#'>Read More...</a>";
?>
Note : // in your code you have to use your variable instead $longString