0

Hi to all javascript pros! I search solution for expanding multilevel divs which contains links to doc/pdf files with posibility to copy/past or share url links in expanded condition. I am a total newbie with javascript and not sure wich way it can be realized. May be something like "location.hash" and "on hashchange" Here is code i use for expanding/collapsing multilevel divs on my site:

$(document).ready(function(){   

$('.lib_element_sign_pos').toggle(function() {
    $(this).css("background-image", "url('/images/-.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').slideDown('slow');
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').slideDown('slow');
    } , function() { 
    $(this).css("background-image", "url('/images/+.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').hide();
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').hide();

});

    $('.lib_element_text').toggle(function() {
    $(this).parent().find('.lib_element_sign_pos').css("background-image", "url('/images/-.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').slideDown('slow');
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').slideDown('slow');
    } , function() { 
    $(this).parent().find('.lib_element_sign_pos').css("background-image", "url('/images/+.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').hide();
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').hide();

});

    $('.lib_element_about').click(function() {
        if($(this).next().css('display') == 'none')
            $(this).next().slideDown('100000');
        else
            $(this).next().hide();
        $('#lib_area').find('.lib_element_info').hide();
    } , function() { 
});

});

Will be happy to any help. Thanks in advance!

vikprostokvasha
  • 15
  • 3
  • If it's the expand/collapse functionality you're after then have a look at http://jqueryui.com/accordion/ it'll make your life a little easier. – Mina Sep 24 '13 at 08:46

1 Answers1

0

Does Jquery toggle - expand / collapse on multiple divs help at all?

Also, here are some notes:

1) the .find() function is very expensive and you should avoid calling it so many times. 2) It seems like your code is very dependent on the ordering of the DOM nodes (there are many .parent().parent() calls). If you ever change the parents of children of any DOM nodes, you'll have to change this function in many places. 3) Good luck :)

Community
  • 1
  • 1
mitchfuku
  • 309
  • 1
  • 2
  • 7
  • Thanks for quick responding, but actualy for expanding/collapsing divs this code work as expected. May be is not best solution but it work. What i searching for is save expanded divs condition to url mostly for sharing. – vikprostokvasha Sep 24 '13 at 09:43
  • you mean you want to save the state of the page? As in, if a user visits the page and opens the divs, you want them to remain open after they close and reopen the page? – mitchfuku Sep 24 '13 at 09:49
  • if you want to "store" variables in the url and use them to hide or show things on the page, check out this post [here](http://stackoverflow.com/questions/5073859/jquery-how-to-get-parameters-of-a-url). You can add a parameter to your url, get that value with javascript, then add a class to the appropriate DOM nodes that will show the expanded divs. – mitchfuku Sep 24 '13 at 09:53