SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I use one function with multiple buttins to show hide multiple HTML Divs?

    Hello everyone, I have this function that toggles between two CSS classes and shows/hide div content on an html page.

    I want to have this function to work on multiple divs, but I do not know how to expand the function. Currently the div holding the more content is called: moreContent.

    What I have done is create individual function for each instance that I want to call it on a specific div.

    Example: Lets say I have 5 articles on a page. I want to add a button under each article that show/hide the more div. Currently I have only on and to put it on all 5 I have to duplicate the function and change the names
    of the classes.

    Here is the code:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    $('.readMore').click(function(){
        $(this).toggleClass('readLess');
        $('.moreContent').toggle();
    }); 
    });
    </script>

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Use cascading stylesheets instead and change the parent class

    #content .readMore{height:0;}
    #content.open .readMore{height:auto;}

    then you can just change the class of the id'd element "content"

    Code:
    onclick=function(){
    o=document.getElementById("content");
    if(o.className=="") o.className="open"; else o.className="";
    }
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you are using the classes, then you need to do an .each function, then reference the specific moreContent element like so:

    HTML
    Code HTML4Strict:
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>

    JS
    Code JavaScript:
    $('.readMore').each(function(i) {
    	$(this).on('click', function() {
    		$(this).next().toggle();
    	});
    });

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    If you are using the classes, then you need to do an .each function, then reference the specific moreContent element like so:

    HTML
    Code HTML4Strict:
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>
    <div class="article">
    	<p>Text text</p>
    	<a class="readMore" href="#">Read More</a>
    	<div class="moreContent">
    		<p>Text text</p>
    		<p>Text text</p>
    	</div>
    </div>

    JS
    Code JavaScript:
    $('.readMore').each(function(i) {
    	$(this).on('click', function() {
    		$(this).next().toggle();
    	});
    });

    Thanks mate, this is exactly what I needed. But I had a readLess CSS class that shows on mouse image and a readless graphic when the button is clicked.
    Example: The bottom has four state: ReadMore, readMore Hover, readLess and ReadLess Hover.
    So when I mouse over the read more button, it dims when I click on it, the button than shows the ReadLess graphic, finally when I hover over readless it dims also and back to read more when clicked.

    I guess in a nutshell with your example, how do I also toggle the class between readmore and readless?


    Thanks!!

    IC

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Within the click function:
    Code:
    $(this).toggleClass('readMore readLess');

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator View Post
    Thanks mate, this is exactly what I needed. But I had a readLess CSS class that shows on mouse image and a readless graphic when the button is clicked.
    Example: The bottom has four state: ReadMore, readMore Hover, readLess and ReadLess Hover.
    So when I mouse over the read more button, it dims when I click on it, the button than shows the ReadLess graphic, finally when I hover over readless it dims also and back to read more when clicked.

    I guess in a nutshell with your example, how do I also toggle the class between readmore and readless?


    Thanks!!

    IC

    I figured this out, I don't know much about JQuery or JS.

    But I simply added the toggle class to the example like this:

    Final Code:

    Code:
    $(document).ready(function() {
    $('.readMore').each(function(i) {
    	$(this).on('click', function() {
    		$(this).toggleClass('readLess');
    		$(this).next().toggle();
    	});
    });
    });
    Thanks again!

  7. #7
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    Within the click function:
    Code:
    $(this).toggleClass('readMore readLess');
    We may have posted at exactly the same time!

  8. #8
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Iconic_creator View Post
    I figured this out, I don't know much about JQuery or JS.

    But I simply added the toggle class to the example like this:

    Final Code:

    Code:
    $(document).ready(function() {
    $('.readMore').each(function(i) {
    	$(this).on('click', function() {
    		$(this).toggleClass('readLess');
    		$(this).next().toggle();
    	});
    });
    });
    Thanks again!
    That way doesn't toggle the readMore class name, it will just add/remove the readLess class name

  9. #9
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    That way doesn't toggle the readMore class name, it will just add/remove the readLess class name
    Yes, I took your method and thank you so much! Can I mark this post as answered?


Tags for this Thread

Bookmarks

Posting Permissions

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