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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts

    Help with hide(), show()

    I made this script to open and close a div

    It works but if I apply it to multiple div's it opens and closes them all. I want it to only open/close for one div at a time

    Code:
    $(document).ready(function() {
        $('.open_btn, .close_btn').click(function() {
            if ($('.open_close_div').is(':visible')) {
                $('.open_close_div').hide();
                $('.close_btn').hide();
                $('.open_btn').show();
            } else {
                $('.open_close_div').show();
                $('.open_btn').hide();
                $('.close_btn').show();
            }
        });
    });
    Code:
    <div id="main_content_title"> 
        HTML
        <div class="open_btn"><a href="#"></a></div>
        <div class="close_btn"><a href="#"></a></div>
    </div>
    
    <div id="content_main_wrapper" class="open_close_div">
        content.............
    </div>
    I'm trying to avoid giving the div's unique names because I'm reusing them multiple times.

    also, I also tried to write the script like this

    Code:
    (function( $ ){
        $.fn.openCloseDiv = function() {
            $('.open_btn, .close_btn').click(function() {
                if ($('.open_close_div').is(':visible')) {
                    $('.open_close_div').hide();
                    $('.close_btn').hide();
                    $('.open_btn').show();
                } else {
                    $('.open_close_div').show();
                    $('.open_btn').hide();
                    $('.close_btn').show();
                }
            });
        }
    });
    But I couldn't get it to execute.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Use dynamic class name or id

    Because of you can used same class name for all div.

    Try to use all different class name or id to all div.

    Or try to class name like open_close_div_1,open_close_div_2, ... , open_close_div_8

    And count the total number of div and used for loop in jquery or javascript.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Much easier to traverse the DOM using next():

    Code:
    $(document).ready(function () {
        $('.button').click(function() {
    		$(this).next().toggle();
    		$(this).toggleClass('activeButton')
        });
    
    });
    with html:

    Code:
    <div class='button'>Button</div>
    <div  class="open_close_div">
        Content 1
    </div>
    
    <div class='button'>Button</div>
    <div class="open_close_div">
        Content 2
    </div>
    
    etc etc etc
    Toggling the class on the clicked button means less unnecessary html and simpler js.

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by SB65 View Post
    Much easier to traverse the DOM using next():

    Code:
    $(document).ready(function () {
        $('.button').click(function() {
    		$(this).next().toggle();
    		$(this).toggleClass('activeButton')
        });
    
    });
    with html:

    Code:
    <div class='button'>Button</div>
    <div  class="open_close_div">
        Content 1
    </div>
    
    <div class='button'>Button</div>
    <div class="open_close_div">
        Content 2
    </div>
    
    etc etc etc
    Toggling the class on the clicked button means less unnecessary html and simpler js.
    Well, I read that there is a cross browser compatibility issue with toggle().
    from what I've read online Firefox doesn't like it. That's why I'm using hide()/show().

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    News to me...code I've given you works perfectly in Firefox.

    EDIT: A quick Google doesn't bring up any issues with FF and toggle either, and I've certainly never come across one.
    Last edited by SB65; 11-30-2010 at 06:51 PM.

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by SB65 View Post
    News to me...code I've given you works perfectly in Firefox.

    EDIT: A quick Google doesn't bring up any issues with FF and toggle either, and I've certainly never come across one.
    I dunno maybe I was dreaming.

    Anyway, can't get the code you suggested to work at all. It might be the wrong approach to what I'm trying to achieve. I think it's because the div with the class="open_close_div" it wrapped in another div.

    it's like this

    Code:
    <div id="content_main_bg_top">
        <div id="main_content_title"> 
            HTML<div class="button"><a href="#"></a></div>
        </div>
    </div>
    <div id="content_main_bg_middle" >
        <div id="content_main_wrapper" class="open_close_div" >
            Content.........
        </div>
    </div>
    <div id="content_main_bg_bottom"></div>

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Slighgtly more complex then:

    Code:
    $(document).ready(function () {
        $('.button').click(function() {
    		$(this).parent().parent().next().find('.open_close_div').toggle();
    		$(this).toggleClass('activeButton')
        });
    
    });
    So, from the clicked element we're going up two elements - .parent().parent() - then to the next element, then finding the child element with class 'open_close_div' and toggling that.

  • #8
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Sweat. Thanks.

    OK just so I understand.

    Code:
    $(this).parent().parent().next().find('.open_close_div').toggle();
    Makes the script look up two levels of divs, and the ".find" looks for the div with class="open_close_div"?

    So if I want to look down I would use siblings().

    Is that right?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    .siblings() will find all elements at the same level in the DOM, including those before the matched element. .next() will find just the following sibling. There's also .prev(), which will find the preceding element, and nextAll(), which will find all the following siblings. Similarly prevAll().

    You've probably found this already, but all the traversing methods are documented here.
    Last edited by SB65; 11-30-2010 at 07:57 PM.


  •  

    Posting Permissions

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