CODEWITHSUNDEEP
javascripthtmlcssshow-hidestyling
box
box

Reputation: 161

Styling javascript function *show/hide* CSS/HTML/JS

How would i style the read more and show less? ive tried styling #tag1 but this just alters the 'read more' text that first appears

Heres the JS

<script>
function toggleAndChangeText(divId, tagId) {
     $("#"+divId).toggle();
     if ($("#"+divId).css('display') == 'none') {
          $('#'+tagId).html('Read More <i class="icon-circle-arrow-down"></i>');
     }
     else {
          $('#'+tagId).html('Show Less <i class="icon-circle-arrow-up"></i>');
     }
}

and the html

        <a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
        <p>Read More <i class="icon-circle-arrow-down"></i></p> </a>

Here is what the text looks like during every section...

enter image description here

The first one is when you first see the button. Then the user clicks on it and the 'Show Less' appears as you can see the button is further to the left and less padding on the bottom. when the user then goes to close the show less button, read more appears but stays in the same position as the show less.

My question is how would i go about styling the interactive read more/show less ones so they are in the position the first read more is? sorry if this is confusing!

Upvotes: 0

Views: 1067

Answers (2)

Mike Phils
Mike Phils

Reputation: 3505

This will help you: Style: 

<style>
    #open{
    display: none;}
    </style>

HTML:

<p id="open">Content goes here</p>

<a href="javascript:void(0);" id="click1"><span class="text"><strong>Read More</strong><img src="icon-show.png" /></span><span class="text" style="display:none;"><strong>Show less</strong><img src="icon-hide.png" /></span></a>

Javascript:

 <script type="text/javascript">
    $(document).ready(function() {
    $('a#click1').click(function() {
      $('p#open').slideToggle();

    $('span.text').toggle();
       return false;
        });
         });
        </script>

Upvotes: 0

Pouki
Pouki

Reputation: 1664

Try : 

$('#'+tagId).html('<p>Read More <i class="icon-circle-arrow-down"></i></p>');

I guess you have a padding or margin on your paragraphs

Actually, you're replacing 

<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
    <p>Read More <i class="icon-circle-arrow-down"></i></p> </a>

By 

<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
    Read More <i class="icon-circle-arrow-down"></i></a>

Upvotes: 1

Related Questions