1

I have a redundant process for making div's visible / hidden and I believe the way to make it more efficient is to use a loop.

Currently I have numerous div's through the document but there are 6 in particular that I want to deal with. I have a series of buttons that correspond to the six div's. When person clicks button A I want to show (make visible) div A and hide Div's B,C,D,E,F. My javascript is something like this:

<a href="#" onclick="ShowMe('A'); return false" />
<a href="#" onclick="ShowMe('B'); return false" />
<a href......etc />

<div id="A">blah...blah</div>
<div id="B">blah...blah</div>

<script type="java....">

   function ShowHideDiv(DivName)
   {
      if(DivName == 'A')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'visible';

         var divb = document.getElementById('B');
         div.style.visibility = 'hidden';

         etc....
      }
      else if (DivName == 'B')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'hidden';

         var divb = document.getElementById('B');
         div.style.visibility = 'visible';
         etc...............
      }

   }

</script>

So as mentioned a prime candidate for loop but my question is how to contain the loop. For example if my loop went through the entire document object then I would have divs that I want visible being hidden so how do I avoid this?

I had two thought but was if others had additional thoughts, ideas, techniques etc.

  1. Give my divs a really oddball prefix to their name like ShowHide_A then my loop can go through all the divs in the document object, parse it's name, if it doesn't have the prefix then move to the next one. This of course would be very inefficient if we had a large document and the script was getting every object and parsing then checking the name.

  2. Wrap the div's in question in a parent container such as:

Then my javascript could be contained to looping through just the DivParent tree. But what if my div's are at different places in the document model? Do I keep them in the ParentDiv and position then where they belong with with css position properties?

Any other ideas would be greatly appreciated JB

Improve this question

4 Answers 4

Reset to default
2

Let me suggest a better approach.

If you can use jQuery, you can do the following:

Assign a class (e.g. box) to all of your divs. Then your button needs to call this function:

function toggleDiv (divID) {
    $(".box").hide();
    $("#"+divID).show();
}

What you can also do is assign e.g. data-div attribute to your button which contains the ID of the div to hide/show, and then you can transform the above to the following (assuming your buttons have the button class):

$(".button").click(function () {
    var divID = $(this).attr("data-div");
    $(".box").hide();
    $("#"+divID).show();
});

The above covers everything, assigning events to the buttons and hiding/showing divs.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Just to add, your buttons would look like something like this: <button data-div='A'>Show/hide A</button>
I'm not saying I disagree just want to understand. See my comment to winterblood. We would still be looping through the entire document object looking for our "class". The data-div seems more appealing as it would contain a more direct approach. Currently my buttons are href styled to look like buttons but they can be easily changed.
Sorry I'm afraid I don't understand your comment?
Well we would be looping through every object on the page looking for a matching class name in the class name show / hide approach.
Well jQuery selectors don't really work that way, as in they don't really "loop through every object", it's actually a lot smarter than that.
|
2

see suppose you have markup like this

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

then add a script like this:

$('input[type=button]').click(function(){
    $('.marked').hide(200);
   $('#'+$(this).data('target-div')).show();
});

it should work.

see this fiddle

so, you are not iterating through all the dom elements, you are picking exactly the ones you need to deal with. upon click, you hide all of them, and show the one which is target i.e. data-target-div

Improve this answer

Comments

1

jQuery based solution:

Add a class to your div's that allow hiding/showing and then do

function ShowHideDiv(DivName)
{
    $(".ShowHide").not("#" + DivName).hide();
    $("#" + DivName).show();
}
Improve this answer

3 Comments

ahhhh. I never thought of using a css class for anything other than styling. Now if I understand correctly this will process through the entire document and find matching class name.
Correct. To limit its scope to a particular part of the document you could instead do $("#SubPart .ShowHide").not("#" + DivName).hide(); Id based selectors are one of (if not the) quickest in jQuery, and class selectors are not too far behind.
Just remember that $("#SubPart .ShowHide") is actually slower than $(".ShowHide")
0

Add class='switchable' (or whatever) to each such DIV then using prototype.js you could do something like this

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.