Switching styles (Class) on a function that show and hide a div tag content


Tags: jquery,css

Problem :

I see a lot of resource on show/hide content using JQuery but what I don't know is how I can switch the style on this function as well. I can switch the text that display but I am using a button as a background image in a anchor tag.

Here is what I need to do. The button is default to Show More but When the button is click the content is visible; I would like to switch the class/style so that the button indicate Show Less.

Finally, how do I add this to more than one area in the page, do I need to create separate functions for each area?

Here is the JQuery:

<script type="text/javascript">
$(document).ready(function() { 
  $('#additionalContentBox').hide(); 
  $('.readmore').toggle(function(){ 
    $('#additionalContentBox').show(); 
  }, 
  function(){ 
    $('#additionalContentBox').hide();
    $('.readless').toggle(function(){ 
  }); 
});
</script>

The HTML:

<a href="#/" class="readmore readless">Read Full Article</a>

<div id="additionalContentBox">
<p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p>
</div>

Finally, the CSS:

.readmore{
    display: block;
    background-image: url(img/readmore15.png);
    text-indent: -10000px;
    background-repeat: no-repeat;
    background-position: bottom left;
    display: block;
    height: 18px;
    line-height: 18px;
    width: 100px;
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom: -14px;
}


.readless{
    background-image: url(img/readmore15.png);
    background-position: top left;
}


Solution :

You could try something simple, like :

$('#your-link').click(function(){
    $(this).toggleClass('readless');
    $('#your-div').toggle();
}); 

    CSS Howto..

    Hide a partially shown div

    How to differentiate the common css class by using other css class

    How to create a pure CSS tooltip with HTML content for inline elements

    How to make my css webkit animation stop changing

    Show text underneath image while hovering without disrupting other elements

    PHP: How to style session output [closed]

    How to write two CSS files: with and without sourcemap

    How to center two square blocks in page?

    Javascript: How do I check a css style and then change another css style?

    How do I centre align two BTN button within a jumbotron in HTML

    How to increase width of Bootstrap container on Max width?

    How to run a CSS animation infintely forwards

    How to flip background image using CSS?

    Before CSS, how one would change margins and paddings?

    How do I filter unwanted CS styles from CS sheet?

    Changing opacity for div in div - is this possible? How?

    Bootstrap dropdown div not showing in non-collapsed view

    How to keep block elements inline and also correctly centered?

    HTML/CSS: How do I make an input field with 2 vertically positioned buttons next to it?

    How does one know exact pixel size / relationships between CSS elements?

    How to change the current link color in navigation bar

    How to free a paragraph from its CSS style?

    Show Content if below specific width

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

    How to create dynamic CSS class in in extjs or javascript

    How to create a pixel perfect divider using css border [closed]

    How to float Dojo DropDownMenu over a table cell

    How to hide and show a separate div with CSS

    How to make outer columns same height with nested bootstrap grids

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?