Home › Forums › JavaScript › Show/Hide Efficiency
- This topic is empty.
-
AuthorPosts
-
April 15, 2014 at 6:29 am #168118TheTechBoxParticipant
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.
Is the way I have done it in this CodePen the most efficient or can it be better?
Thanks.
April 15, 2014 at 11:31 am #168136Paulie_DMemberOne 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?
April 16, 2014 at 7:53 am #168180Alan CParticipantIf 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); } });
April 16, 2014 at 8:31 am #168181PoddersParticipant.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
April 16, 2014 at 9:31 am #168183TheTechBoxParticipant@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!April 17, 2014 at 7:10 am #168219Alan CParticipant@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 –
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.