3

i use a simple bit of code to make a div collapse, this is it: 

<script language="JavaScript">
    <!--   
        function expand(param)   
        {   
            param.style.display=(param.style.display=="none")?"":"none";   
        }   
    //-->  
</script>

what code do i add to make it recognise when one div is open an collapse the previous div?
here's the link I'd use:

<a href="javascript:expand(document.getElementById('div1'))">Link 1</a>  
      <div id="div1" width="300px" style="display:none"></div>

Any ideas?

aynber
  • 22,380
  • 8
  • 50
  • 63
Ricki
  • 933
  • 2
  • 15
  • 33
  • @Ricki Is this tabbed navigation? If yes, then consider grouping the tabs and content areas with UL's. – Šime Vidas Feb 28 '11 at 22:11
  • not as such, but thanks for your input. what im looking for a is just a nice extra bit of code to slap onto this original code – Ricki Feb 28 '11 at 22:33
  • I think you need to explain better what your scenario is. This question is hard to answer otherwise. You say you have fifty divs, but do you want only one of those visible at a time? Are the divs in pairs of two? etc. You want one to open and one to collapse, but if you have fifty what do you expect to happen with those fifty? – mrtsherman Mar 01 '11 at 21:20
  • what i want is some code, preferably small, which closes one div which is already open, when another one is opened. It will be used on a 'display artist by letter' type page. So any suggestions are welcome. Eg, when a user clicks on the letter 'a' a selection of artists will appear in divs below the letter. – Ricki Mar 02 '11 at 18:30

2 Answers2

4

This is something jQuery works really well for. Here is a working example in jsfiddle.

http://jsfiddle.net/mrtsherman/uqnZE/

Example html

<div class="category">A
    <div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
    <div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
    <div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>

And the code:

$(".category").click( function() {    
    $(".artists").hide();
    $(this).children(".artists").show();
});

Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • although this is great, i have 50 divs.. and buttons are not what im looking for. thanks for the input though – Ricki Feb 28 '11 at 22:31
  • This has a great deal of HTML dependencies, it's tightly coupled. Displays the potential to become messy over time, and certainly not scalable or reusable. – Sandwich Mar 05 '11 at 04:28
  • If you want to avoid any chance for a flicker should someone click the same category twice, just hide the sibling category's artists. Inside the click, you could just address the siblings. `$(this).children(".artists").show();` and `$(this).siblings(".category").find(".artists").hide();`. Here's a [sample](http://jsfiddle.net/patridge/fjKW3/) derived from mrtsherman's work. – patridge Mar 10 '11 at 22:08
2

If you were willing to use jQuery, the selector of your interest is something along the lines of

$('div#parent-container > div').filter(':visible');

For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)

Something to mess with:

$(function(){
    //Reference Object
    var $divs = $('div > div');
    //Buffer for selected variable
    var $selected = 0;
    //Show first
    $divs.eq(0).show();


    $('#next').click(function(){
        //Update selected var
         $selected = $divs.filter(':visible');
        //Save next to variable
        var $next = $selected.next();
        //Change Visibility
        toggle($next);
        //Prevent Default
        return false;
    });

     $('#prev').click(function(){
        $selected = $divs.filter(':visible');
        var $prev = $selected.prev();
        toggle($prev);
        return false;
    });

    $('a').click(function(){
        $selected = $divs.filter(':visible');
        var selector = $(this).attr('href');
        if(selector == '#') return false;
        toggle( $( selector ) );
        return false;
    });


    var toggle = function($toggle){
     if(!$toggle.length) return false;
         $selected.hide();
         $toggle.show();   
     }
});

<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
<a href="#item-4">Show Item Four</a>

<div>
    <div id="item-1">One</div>
    <div id="item-2">Two</div>
    <div id="item-3">Three</div>
    <div id="item-4">Four</div>
    <div id="item-5">Five</div
    <div id="item-6">Six</div>
</div>

div > div {
 font-size:5em;
 width:auto;
 text-align:center;
 padding:20px 0;   
 display:none;
}
Sandwich
  • 2,304
  • 3
  • 24
  • 30