www.webdeveloper.com
Results 1 to 3 of 3

Thread: [Help] Expandable div's (javascript)

  1. #1
    Join Date
    Jul 2012
    Posts
    2

    Post [Help] Expandable div's (javascript)

    Dear members of this forum,

    I've created expandable Div's using this tutorial.
    http://www.dynamicdrive.com/dynamici...edcollapse.htm

    When I was busy I found out that it's not possible to toggle several Div's at once, it is only possible to expand several Div's at once with separated buttons for expanding and collapsing.

    I tried something with the javascript but was not able to manage it.

    Can someone help me to toggel several Div's at once with the "toggle" function?

    Thanks in advance!!

  2. #2
    Join Date
    May 2010
    Posts
    213
    Ok, i didn't read the whole tutorial, but from what i can see by just glancing at it, is that the tutorial uses jQuery library, but also a jQuery plugin called animatedcollapse... Is that right?

    I don't see the need for that and i have no idea why someone wrote a plugin for doing something that jQuery already has built in. So instead of using that plugin, you can only implement jQuery and then simply achieve this same behavior by calling:
    Code:
    $("#jason").toggle();
    This simple call will toggle a div with id="jason". Toggle means it will show it if hidden, and hide if shown.

    Now, if you want to toggle more divs at the same time, you have two choices.

    Your first choice:

    You will define 3 divs with different id's. First div has id="jason", second has id="david" and third has id="bananas". And then you can call the toggle method on divs with all 3 id's together, like this:
    Code:
    $("#jason, #david, #bananas").toggle();
    Your second choice:

    You can drop the id's and use classes instead. Because the HTML specification doesn't allow you to use the same id for more than one element, calling a method on an id will only affect one element. This changes with classes, because you can use the same class on any number of div's.

    So again define 3 divs, but give all of them the same class, class="jason". Then call the toggle method on class jason, like this:
    Code:
    $(".jason").toggle();
    I've uploaded a working example of this for you here: http://webpark.hr/temp-js/toggles.php

    Now if you want animation, you can simple replace the toggle() method, with slideToggle() or fadeToggle() etc...

  3. #3
    Join Date
    Jul 2012
    Posts
    2

    Question

    First of all, thanks for your response!

    The way to do it in jquery is indeed alot easier.
    I'm using a script in my website wich for some reasons blocks to jquery

    This is the script i'm using:

    HTML Code:
    var iWebkit;if(!iWebkit){iWebkit=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a.length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hideURLbar()};iWebkit.init()}}
    When I remove this script from my website the jquery boxes do work :S

    The example you gave is very clear, thanks for that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles