PDA

View Full Version : Show/Hide DIV with no line break



a4udi
Mar 4th, 2012, 06:57 AM
I have a page where someone can enter in profile information about themselves and if it is more than 1000 characters, it shows a "read more" link and then you can click on that to expand the content (done with a jquery toggle script)

Code is below. My question is, how do I get it to work with the divs so there is no line break? right now it will display like this:


This is my profile, welcome to my

read more...

Then when you click "read more..." to expand the link it would go something like this

This is my profile, welcome to my

profile page, oh no there's an ugly line break in the middle of the paragraph.

read more...

I want it to display on the same line so if there's more text after the 1000 chars, it just continues going on the same line...



<script type="text/javascript">$(document).ready(function(){$('#bio').hide();$('a.toggle').click(function(){var id=$(this).attr('id');$('#bio'+id).slideToggle("slow");return false})});</script>

<?php echo(substr($row_Profile["user_content"],0, 1000));?>

<div id="biofull" style="display: none;"> <?php echo(substr($row_Profile["user_content"],1001)); ?></div>
<a href="#" class="toggle" id="full">read more...</a>

stevenmw
Mar 5th, 2012, 06:30 AM
I'd need to see your CSS, but just guessing. I'd start troubleshooting the 'biofull' div. It might need a line height or margin specification.

Another guess just by looking.

I'd try putting...


<a href="#" class="toggle" id="full">read more...</a>
inside of the 'biofull' div.