jquery change style on click (context = bootstrap)

Question

So I have this text field that is too large to show, but you want a button that will display the rest:

<div class="span4" >
    some description..
    <div class="hidden-text" style="display:none">
        rest of description<br/>
    </div>
    <a href="#" class="btn" id="readmore"><i class="icon-chevron-up"></i> Read more</a>
    <script>
    $("#readmore").click(function(){
        $('#hidden-text').attr('style', '');
    });
    </script>
</div>

Why does this not work and how should it be done?

EDIT:

Thanks for the demo, unfortunately I can't replicate it

<div class="span4" >
    some description..
    <style>
    .hidden-text {
        display:none;
    }
    </style>
    <p class="hidden-text">rest of description<br/></p>
    <br/><br/>
    <a href="#" class="btn" id="readmore"><i class="icon-chevron-down"></i> Read more</a>
    <script>
    $(document).ready(function(){
        $('.readmore').on('click', function(){
            $('.hidden-text').slideDown('slow');
            });
    });
    </script>
</div>

I don't see what is so different from the demo...

Ayush · Accepted Answer · 2012-11-11 23:20:49Z

2

Instead of doing

$('#hidden-text').attr('style', '');

to remove the display:none, just do

$('#hidden-text').show()

Or, if you want it to slide down, you could even do

$('#hidden-text').slideDown();

Reference:

jQuery .show()
jQuery .slideDown()

Demo

answered Nov 11, 2012 at 23:20

Ayush

42.5k52 gold badges170 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick Calder Over a year ago

You're missing the fact that he's referencing an ID that doesn't exist.

Rick Calder · Accepted Answer · 2012-11-11 23:39:59Z

1

Make sure you're referencing jQuery on your page.

Your code isn't working because you're trying to take the style off an item with the id of hidden-text yet your text has a CLASS of hidden-text. You want this:

<div class="span4" >
some description..
<div class="hidden-text" style="display:none">
    rest of description<br/>
</div>
<a href="#" class="btn" id="readmore"><i class="icon-chevron-up"></i> Read more</a>
<script>
$("#readmore").click(function(){
    $('.hidden-text').attr('style', '');
});
</script>
</div>

notice the . in the attribute line where you had # and honestly the show is a better solution

$('.hidden-text').show();

answered Nov 11, 2012 at 23:39

Rick Calder

18.8k3 gold badges27 silver badges41 bronze badges

Collectives™ on Stack Overflow

jquery change style on click (context = bootstrap)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related