Help needed for a expand-collapse menu

Discussion in 'Javascript' started by Rabel, Nov 3, 2006.

  1. Rabel

    Rabel Guest

    I am not very good at javascript I mostly am a flash developer but I am
    trying to apply one of our old expanding menus to work for a new site
    but it doesn't collapse the way I need it to right now the code I am
    using looks like this

    function openSubCategory(n, nn) {
    var i = 0
    for(i=1;i<n+1;i++) {
    var sel = document.getElementById('insideSubCategory'+i);
    sel.style.display = 'none';
    }
    var sel = document.getElementById('insideSubCategory'+nn);
    sel.style.display = 'block';
    }

    then the code for the text that pops up once the button is clicked is

    <div id="insideSubCategory1" style="border:1px; display:none;">
    <div style="display:block; padding-left:3px;">
    <table width="741" border="0">
    <tr>
    <td width="500" valign="top"><span
    class="bodycopy"><b>Experience</b><br />
    has eighteen years of planning and architectural experience. Since
    joining </span></span><p><span class="bodycopy"><b>Education</b><br />
    Master of City Planning<br />
    University of Pennsylvania, Certificate of Urban
    Design</span></p>
    <p class="bodycopy"><b>Licenses</b><br />
    Registered Architect, PA, NJ, MD, NCARB Certified</p>
    </span></td>
    <td width="231" valign="top"><table width="231" border="0"
    bgcolor="#638BCF">
    <tr>
    <td width="125" bgcolor="#638BCF"><img src="Davirmann.jpg"
    width="125" height="180" /></td>
    <td width="96" bgcolor="#638BCF">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </div>

    so I need help with the collapse part and this is how I would like to
    do it - add a graphic that is a "+" then a "-" when clicked on to
    expand and collapse - im not sure how to make that graphic change and
    for the expand or collapse code to be run. Any help is apprieciated

    Thanks
    Randy
    Rabel, Nov 3, 2006
    #1
    1. Advertising

  2. Rabel

    Rabel Guest

    David Golightly wrote:
    > Ok, first thing you want to do is scrap your HTML. You should be using
    > UL/LI's for this, not what you've got now. You should do your
    > formatting with CSS, not using <br /> tags (which in the long run will
    > only make life more difficult).
    >
    > Hope this helps:
    >
    > <html>
    > <head>
    > <title></title>
    > <style>
    > .menu ul { display: none; list-style-type: none; padding-left: 0; }
    > .menu ul li { border: 1px solid gray; cursor: pointer; }
    > /* this doesn't work on IE6, but who cares about IE6 anymore? ;) */
    > .menu ul li:hover { background-color: #ffffdd; }
    > div.menu { float: left; width: 200px; }
    > </style>
    > <script>
    > // Convenient wrapper for document.getElementById (who want to type
    > that all the time?)
    > function $(id) {
    > return document.getElementById(id);
    > }
    >
    > // Recursively search an element's parents for the first parent with a
    > given tag name
    > function getParentByTag(element, tag) {
    > if (!element || element.tagName == 'HTML') return null;
    > if (element.tagName == tag) return element;
    > return getParentByTag(element.parentElement || element.parentNode,
    > tag);
    > }
    >
    > // Toggles the menu - this is the actual event handler
    > function toggleMenu(e) {
    > e = e || window.event;
    > var tgt = e.target || e.srcElement;
    >
    > // Get the actual element we put this handler on
    > // Not always the same as the event target - usually a parent
    > var div = getParentByTag(tgt, 'DIV');
    > if (!div) return; // Fail silently
    >
    > // Assuming, of course, you've only got one UL in your div
    > var ul = div.getElementsByTagName('UL')[0];
    > hideAllMenus();
    > if (ul.style.display == 'block') ul.style.display = 'none';
    > else ul.style.display = 'block';
    > if (e.stopPropogation) e.stopPropogation();
    > else if (e.cancelBubble) e.cancelBubble();
    > }
    >
    > // Hide all the menus in divs with class "menu"
    > function hideAllMenus() {
    > var divs = document.getElementsByTagName('DIV');
    > for (var i=0; i<divs.length; i++) {
    > // Go through all divs in the document looking for className
    > containing
    > // (not ==! - there can be multiple classes) "menu"
    > if (divs.className.search('menu') > -1) {
    > var ul = divs.getElementsByTagName('UL')[0];
    > ul.style.display = 'none';
    > }
    > }
    > }
    >
    > // Make it happen in an onload handler
    > // Otherwise, this script gets executed before the DOM functions have a
    > document
    > window.onload = function() {
    > hideAllMenus();
    > var menuIds = ['menu1', 'menu2'];
    > for (var i=0; i<menuIds.length; i++) {
    > $(menuIds).onclick = toggleMenu;
    > }
    > }
    > </script>
    > <body>
    > <div id="menu1" class="menu">
    > <h3>About</h3>
    > <ul>
    > <li>About me</li>
    > <li>More about me</li>
    > <li>Lots more about me</li>
    > </ul>
    > </div>
    > <div id="menu2" class="menu">
    > <h3>Stuff</h3>
    > <ul>
    > <li>What I do</li>
    > <li>Give me money</li>
    > </ul>
    > </div>
    > </body>
    > </html>
    >
    > -David
    >



    Thanks David but I tried to create the graphic part I was talking about
    for your code and couldnt do that could you add that code for me.

    I wanted to add a graphic that is a "+" then a "-" when clicked on to
    expand and collapse
    Rabel, Nov 6, 2006
    #2
    1. Advertising

  3. Rabel

    Rabel Guest

    anybody else have any ideas on how to make this work

    Thanks
    Rabel, Nov 14, 2006
    #3
  4. Rabel

    ASM Guest

    Rabel a écrit :
    > anybody else have any ideas on how to make this work
    >
    > Thanks
    >


    Any other idea exept to use lists (ul -> li -> ul -> li)
    The history about [+] or [-] is very easy to fix.

    example :

    you make an image with [+][-]
    both together side to side (size of each sign = 24/16px)

    <html>
    <style type="text/css">
    #menu { list-style: none; width: 120px; margin:0;padding:0; }
    #menu li, #menu ul { margin: 0; padding: 0; }
    #menu li { background: url(image_on_off.gif) no-repeat -24px top;}
    #menu a { display: block; margin: 2px; margin-left: 26px;
    background: #ffc; height: 20px;}
    #menu li ul li { background-image: none; }
    /* background image in slide doors */
    #menu .hide { background-position: left top; }
    #menu .hide ul { display: none; }
    </style>
    <script type="text/javascript">

    function showHide(what) {
    what.className = what.className==''? 'hide' : '';
    }

    function init() {
    var M = document.getElementById('menu');
    M = M.getElementsByTagName('li');
    for(var i=0; i<M.length; i++)
    if(M.getElementsByTagName('ul').length>0) {
    showHide(M);
    M.onclick = function() { showHide(this); return false;}
    }
    }
    onload = init;
    </script>

    <ul id="menu">
    <li><a href="about.htm">About</a>
    <ul>
    <li><a href="me.htm">About me</a></li>
    <li><a href="job.htm">My job</a></li>
    </ul>
    </li>
    <li><a href="section_1/">Section 1</a>
    <ul>
    <li><a href="section_1/1.htm">Intro</a></li>
    <li><a href="section_1/2.htm">History</a></li>
    </ul>
    </li>
    </ul>
    </html>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Nov 15, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vaclav Jedlicka

    datagrid and border-collapse:collapse style

    Vaclav Jedlicka, Jun 26, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    5,889
    Yan-Hong Huang[MSFT]
    Jun 30, 2003
  2. Jenny

    Expand and Collapse

    Jenny, Aug 5, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    1,881
    William F. Robertson, Jr.
    Aug 5, 2003
  3. VVSRKS

    How can I avoid border-collapse:collapse to come ...

    VVSRKS, Sep 16, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    181
    VVSRKS
    Sep 16, 2004
  4. Tom Castiglia

    Why does Gridview ALWAYS emit style="border-collapse: collapse;"

    Tom Castiglia, Jun 4, 2006, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    1,914
    Tom Castiglia
    Jun 9, 2006
  5. M.L.
    Replies:
    9
    Views:
    278
Loading...

Share This Page