Newbie to jQuery & JS - Collapsible text and styling

JavaScript
1

Im using the jQuery Expander Plugin. I am very new in working with jQuery and JS and I am having trouble changing the positioning of the “hide text.” I like how the “read more” is directly after the paragraph, but the I want the “hide text” to float right. I hope this makes sense. I will include the code, the webpage, and an example of how I want it to look, positioning wise. Any advice would be greatly appreciated. Thanks in advance!

The webpage in question: http://www.bobmccainhomes.com/testimonials.html
An webpage example of how I’d like the “hide text” positioned (floating right.) http://www.homeaway.com/vacation-rental/p139410

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    
<style>

.readmore {
    padding-bottom: 20px;
    
}

.readmore a{
    text-decoration:underline;
    color: #a10324;
}


</style>
    
</head>
<body>

<div class="readmore">
<b>Steve and Patricia Rezaie</b><br>
<p>McCain Construction and Remodeling has done several jobs for us during the past three years. Two of the jobs were a standalone garage and the addition of a carport to our second home so that both look like they were not an afterthought. McCain Construction also repaired a significant problem created by a previous builder&#8217;s mistake on our primary home. Since the repair we have not had any further problems. Bob McCain was able to locate, identify, and repair the problem on our primary home within two weeks after having lived with the problem for over five years. The quality and professionalism of Bob McCain has been refreshing and greatly appreciated. We highly recommend McCain Construction and Remodeling at every opportunity because we know the high standards he sets for his work and his contractors. He closely monitors the work being performed so that it meets with his high standards. We will be remodeling the lake-side elevation of our primary home in the near future.  When we do, you can bet we will look no further than Bob McCain because we know that the work will be first quality and to our specifications.</p><br>

&mdash;Steve and Patricia Rezaie<br>
Lake Limestone<br>
Jewett, Texas</div><!--end read more1-->
  

</body>

<script>

<script type="text/javascript"<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js">
    </script>
    <script type="text/javascript"
    src="http://plugins.learningjquery.com/expander/jquery.expander.js">
    </script>
    <script type="text/javascript">
       $(function () {
            $('div.readmore').expander({
                preserveWords: true,
                widow: 7,
                expandEffect: 'slideDown',
                expandSpeed: 1000,
                collapseEffect: 'slideUp',
                collapseSpeed: 1000,
                slicePoint: 300,
                expandText: 'Read More',
                userCollapseText: 'Hide Text'
                
            });
        });
</script>

</script
</html>
2

Hi there,

The element in question can be targeted through its class “read-less”.
So, just add this to your CSS:

.read-less{float: right;}

As an aside, you have a malformed <script> tag in line 20 of your document which needs seeing to:

<script type="text/javascript"<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js">
    </script>

HTH

3

ah, I see how that worked now. Thanks for the tip! Also, thanks for catching my coding error. Much appreciated :slight_smile: