Results 1 to 2 of 2

Thread: Call Animated Collapsible With Select Form

  1. #1
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Call Animated Collapsible With Select Form

    1) Script Title:
    Animated Collapsible
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...edcollapse.htm
    3) Describe problem:
    Trying to show/hide div's from <select>

    Hello, I am trying to be able to show/hide div's with a <select> form. For Example:

    Code:
    <select id="e1" style="width:210px">
              <option></option>
                        <option value="">Lost Card</option>
                        <option value="">Stolen Card</option>
                        <option value="">Damaged Card</option>
                        <option value="">Card Found By Stranger</option>
                        <option value="">Card Status</option>
                        </select>
    Code:
    <div id="lostcard" style="width: 966px; background: transparent;border:  0;">
                            Hello im a great idea!
                        </div>
    And of course, in the head section:

    Code:
    <script type="text/javascript" src="../js/animatedcollapse.js"></script>
            <script type="text/javascript">
            animatedcollapse.addDiv('lostcard', 'fade=0,speed=400,group=gen,hide=1,persist=0')
            animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
                    //$: Access to jQuery
                    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
                    //state: "block" or "none", depending on state
            }
    
            animatedcollapse.init()
    
            </script>
    I am also wanting to use Select2 3.2 to make custom select menus http://ivaynberg.github.com/select2/index.html.

    Here is how the select forms are setup:

    Code:
    <script src="../js/select2.js"></script>
            <script>$(document).ready(function() { $("#e1").select2({placeholder: "Cards & Service Requests", allowClear: true}); });</script>
            <script>$(document).ready(function() { $("#e2").select2({placeholder: "Transactions", allowClear: true}); });</script>
            <script>$(document).ready(function() { $("#e3").select2({placeholder: "General Call Information", allowClear: true}); });</script>
    I know the rules say you do not support other scripts but I am just showing that to show that the names of the selects are already being declared. I am new to javascript and have been trying to get this to work for the past few hours. I have gotten this to work with regular links, select forms are a completely different story.

    Any help would be greatly appreciated, and if I am missing information just let me know!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    Code:
    <select onchange="ShowDiv(this.value);">
     <option value="jason" >jason</option>
     <option value="kelly" >kelly</option>
     <option value="michael" >michael</option>
     <option value="|jason,kelly,michael" >hide: jason,kelly,michael</option>
     <option value="jason,kelly,michael" >show: jason,kelly,michael</option>
     <option value="jason|kelly,michael" >show: jason hide: kelly,michael</option>
    </select>
    Code:
    function ShowDiv(txt){
     var t,z0=0;
     txt=txt.split('|');
     if (txt[0]){
      var t=txt[0].split(',');
      for (;z0<t.length;z0++){
       animatedcollapse.show(t[z0]);
      }
     }
     if (txt[1]){
      t=txt[1].split(',');
      for (z0=0;z0<t.length;z0++){
       animatedcollapse.hide(t[z0]);
      }
     }}
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 0
    Last Post: 06-09-2009, 08:11 AM
  2. Animated Collapsible DIV v2.01 <form> submit in FF
    By ywkyee in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-10-2009, 04:10 PM
  3. Animated collapse call from other file
    By agehoops in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-19-2008, 10:14 PM
  4. Animated Collapsible Div and animated gifs
    By flangeway in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-22-2008, 02:57 AM
  5. Animated Collapsible DIV - Collapsible DIVs inside collapsible DIV
    By ekin in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-26-2007, 02:03 AM

Bookmarks

Posting Permissions

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