Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Show/Hide Efficiency

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #168118
    TheTechBox
    Participant

    Hey!

    Just wondering if this is the most efficient way of doing what I am trying to do.

    I am trying to have a plus icon change to a minus icon depending on whether the div is visible or not.

    CodePen

    Is the way I have done it in this CodePen the most efficient or can it be better?

    Thanks.

    #168136
    Paulie_D
    Member

    One thing….I really wouldn’t be using ID’s quite so much.

    Reusable code should (IMO) be more reliant on classes and/or data-attributes.

    Perhaps a larger example…I’m wondering how your example would work with multiple divs to show or hide….or are you only showing one at a time?

    #168180
    Alan C
    Participant

    If you want it to be more versatile I would drop the required class and look for the next div or something similar. That way you don’t have to hard code a bunch of stuff in you can just write up your html and let the js handle it. I did something similar with this

    $(document).ready(function() {
            var open = false;
            var iconminus = '<i class="icon-minus-sign"></i>';
            var iconplus = '<i class="icon-plus-sign"></i>';
            $(document).on("click", ".your_class", function() {
                $(this).children().first().remove();
                if (open) {
                    open = false;
                    $(this).next('div').hide();
                    $(this).prepend(iconplus);
                } else {
                    open = true;
                    $(this).next('div').show();
                    $(this).prepend(iconminus);
                }
            });
    #168181
    Podders
    Participant

    .is('.hide');

    Is a lot more efficient than

    .hasClass('hide');

    Check out the jsperf results Here

    Also, i’d be tempted to say why bother to check for a class at all?, just toggle the classes on the <i> in the same function

    http://codepen.io/Podders/pen/JstFr

    #168183
    TheTechBox
    Participant

    @Paulie_D There will be multiple instances of this one page which is why I chose to go with the ID’s route for some of it (It’s for hiding away less important sections in a sidebar).


    @Alan-C
    I like the way everything is ‘deconstructed’ and put into variables. I take it things like this ($(this).next(‘div’).hide();) relies on the fact that it is the next div below and there cannot be anything in-between? For that I guess it would be best to switch it out with an ID selector?

    And out of curiosity, what does this bit do?
    $(this).children().first().remove();


    @Podders
    Thanks for the suggestion, will tweak it and see how we go. In regards to the checking if it has the class, if we wanted to scale it so other things happened depending on whether it was opened or closed we would need to check. But thanks anyway!

    #168219
    Alan C
    Participant

    @TheTechBox well, you could theoretically put any element in there. But I chose div because its just such a general container. If you want something in between like another div you could throw in a simple nth-child selector to grab it. Though that really is only if the in between content is in fact another div. Also I wouldn’t use ID selectors. Those are supposed to be unique and if you intend to have lots of these for like an FAQ a class would be better.

    As for the children remove thing, that’s to drop the old appended sign. Otherwise it keeps appending them on and you end up with a string of + and –

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.