Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Question Change CSS on Click ?

    Hey guys, so i have a small problem.
    I have a comment area on my site.
    And i have the comments set to a specific height, so it only shows so much text.
    And i have a "read more ..." button

    How would i make it so that when I click the read more button.
    The CSS for the comment div changes to height:auto;

    This is what i currently have, and its not working.

    CSS
    Code:
    .tag_desc { clear:both; height:30px; overflow:hidden;  }
    HTML
    Code:
    <div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div>
    Thanks in advance !!

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    getElementsByClassName creates an array containing all the tags with the given Class.
    Thus you have to specify which of the elements collected, you want to refer to.

    The first have entry number 0, thus
    Code:
    document.getElementsByClassName('tag_desc')[0].style.height = 'auto';
    will refer to the first (or only) element collected.

    If you have more than one element collected, and want to change the styling of all the elements collected, you can either run a looping function on all the elements, or use jQuery:
    Code:
    $('.tag_desc').style.height = 'auto';
    which will automatically loop through all the elements.

  • Users who have thanked Lerura for this post:

    aaronhockey_09 (04-12-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Hey, thanks !!
    that worked, but i have 1 more question for you.

    So i have multiple posts with the "read more" link in it.
    And when the person clicks read more, i want it to only change the css for that specific comment.

    But they all have the same class.
    Would i have to give them all an individual ID ?
    if so, how can that be done.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    I will suggest that you create a function to pass the needed values to e.g.:

    Code:
    function SAH(El){      / SAH= set auto height
    document.getElementById(El).style.height='auto';
    }
    or
    Code:
    function SAH(El){      / SAH= set auto height
    document.getElementsByClassName('tag_desc")[El].style.height='auto';
    }
    and addd
    Code:
    onclick="SAH(id/number)";
    to the triggering tag.

    If id or class is best depends on future editng

    As you already have a class for the tags, you also have made a way to identify them.
    Thus you do not have to add an id to identify them.

    If you at a point choose to swap elements or insert/delete a element that is not the last element, the number identifying the tag will also have to be edited.
    Here it would be ideal to use id's, as the are unaffected by changes otherwhere in the document.

    if you only add/delete element last of it kind in the document, you can use either of them.
    I will recommend class in such case


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •