www.webdeveloper.com
Results 1 to 10 of 10

Thread: List - On click open up Div

  1. #1
    Join Date
    Oct 2011
    Posts
    42

    List - On click open up Div

    I have been wracking my brain thinking of a way to come up with displaying the below information. I attempted to create a select menu, but the menu was too long for the likes of IE. So I came up with the below idea. I just need a little help putting it together.

    I have a list of 40 states, listed out as such:

    Alabama
    Arizona
    Arkansas
    California
    Colorado
    Connecticut
    Delaware
    District of Columbia
    Floriday
    Georgia
    Idaho
    Illinois
    Iowa
    Indiana
    Etc.

    When I click on a state, I want a div to open up undearneath that state showing information about that particular state.
    When I click the state again it will then close that div. BUT, if I click on a different state, the state I had open previously will close and the new state I just clicked will open.

    Does this make sense? Any help would be great.
    Thanks soo much!

    -Day

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    ha ha. it seems like you are going in circles. Isn't this what Vic's code in this post does?

  3. #3
    Join Date
    Oct 2011
    Posts
    42
    Hah yeah i sure feel like it. As you can tell I am pretty new to all of this and this one project is making me rip my hair out. There just doesn't seem to be a clean way to do this.

    But yes, Vic's code would work. I was playing around with it, but I can't seem to figure out where I put the content that will be in the open div's? Every time I test it, the div info is overwriting the open and close.
    And I want the "open" and "close" to be just the state's name.

    ??

    Vic's code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .content {
      width:200px;height:200px;background-Color:#FFFFCC;
    }
    
    .title {
      width:200px;height:20px;background-Color:#FFCC66;
    }
    .state {
    	text-align:left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	display:none;
    	width: 500px;
    	padding-right: 10px;
    	padding-left: 30px;
    	padding-bottom: 10px;
    }
    .list {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="tst" >
    
      <div class="content">
       <div class="title" ><a rel="close" >open</a>
       </div>
      </div>
      
      <div class="content" >
       <div class="title" ><a rel="close" >open</a></div>
      </div>
    
      <div class="content" >
       <div class="title" ><a rel="close" >open</a></div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    
    
    
    var zxcAccordian={
    
     init:function(o){
      var id=o.ID,h=o.OpenHeight,ms=o.SlideDuration,obj=document.getElementById(id),clds=obj.childNodes,t,lk,h=typeof(h)=='number'?h:false,uh,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        t=clds[z0].getElementsByTagName('DIV')[0];
        if (t){
         lk=t.getElementsByTagName('A')[0];
         if (lk){
          this.addevt(lk,'mouseup','Open',id,ary.length);
          t=t.offsetHeight;
          uh=h&&h>t?h:clds[z0].offsetHeight;
          ary.push([clds[z0],t,t,uh,'dly'+z0,true,uh-t,lk,lk.rel,lk.innerHTML]);
          clds[z0].style.height=t+'px';
         }
        }
       }
      }
      this['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'&&ms>=0?ms:1000
      }
     },
    
     Open:function(id,nu){
      var o=this['zxc'+id],f,t,a;
      if (o){
       this.All(id,nu);
       a=o.ary[nu];
       a[7].innerHTML=a[a[5]?8:9];
       clearTimeout(o[a[4]]);
       f=a[1];
       t=a[a[5]?3:2]
       this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
       a[5]=!a[5];
      }
     },
    
    
     All:function(id,nu){
      var o=this['zxc'+id],f,t,a,z0=0;
      if (o){
       for (;z0<o.ary.length;z0++){
        if (z0!=nu||typeof(nu)=='boolean'){
         a=o.ary[z0];
         clearTimeout(o[a[4]]);
         f=a[1];
         t=a[nu===true?3:2]
         this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
         a[7].innerHTML=a[nu===true?8:9];
         a[5]=nu!==true;
        }
       }
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=Math.max(now,f<0||t<0?now:0);
       ary[0].style.height=ary[1]+'px';
      }
      if (ms<mS){
       o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[1]=t;
       ary[0].style.height=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    zxcAccordian.init({
     ID:'tst',           // the unique ID name of the parent DIV.                  (string)
    // OpenHeight:100,     //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
     SlideDuration:500   //(optional) the slide duration in milli seconds.         (number, default = 1000)
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    here's my prettied up version - note that you have to put "overflow:hidden in the css for the content divs
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .content {
      width:200px;
      height:200px;
      background-Color:#FFFFCC;
      margin-bottom:2px;
      border:solid 1px;
      overflow:hidden;
    }
    
    .title {
      width:200px;
      height:20px;
      background-Color:#FFCC66;
    }
    
    .arr{
      background:url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png);
      background-size:20px 20px;
      background-repeat:no-repeat;
      background-position:175px 0px;
      cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="tst" >
    
      <div class="content">
       <div class="title"><div class="arr">Alabama</div></div>
       Alabama content
      </div>
    
      <div class="content" >
       <div class="title" ><div class="arr">Alaska</div></div>
       Alaska content
      </div>
    
      <div class="content" >
       <div class="title" ><div class="arr">Arizona</div></div>
       Arizona content
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Accordian (21-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcAccordian={
    
     init:function(o){
      var id=o.ID,h=o.OpenHeight,ms=o.SlideDuration,obj=document.getElementById(id),clds=obj.childNodes,t,lk,h=typeof(h)=='number'?h:false,uh,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        t=clds[z0].getElementsByTagName('DIV')[0];
        if (t){
         lk=t.getElementsByTagName('DIV')[0];
         if (lk){
          this.addevt(lk,'mouseup','open',id,ary.length);
          t=t.offsetHeight;
          uh=h&&h>t?h:clds[z0].offsetHeight;
          ary.push([clds[z0],t,t,uh,'dly'+z0,true,uh-t,lk,lk.rel,lk.style.backgroundImage]);
          clds[z0].style.height=t+'px';
         }
        }
       }
      }
      this['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'&&ms>=0?ms:1000,
       lst:-1
      }
     },
    
     open:function(id,nu){
      var o=this['zxc'+id],f,t,a;
      if (o){
       a=o.ary[o.lst];
       if (a&&o.lst!=nu){
        a[7].style.backgroundImage="url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png)"
        clearTimeout(o[a[4]]);
        f=a[1];
        t=a[2]
        this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
        a[5]=true;
       }
       a=o.ary[nu];
       a[7].style.backgroundImage=a[5]?"url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20up.png)":"url(http://www.iconlet.com/icons/kensaunders/5/2/arrow%20down.png)";
       clearTimeout(o[a[4]]);
       f=a[1];
       t=a[a[5]?3:2]
       this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
       a[5]=!a[5];
       o.lst=nu;
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=Math.max(now,f<0||t<0?now:0);
       ary[0].style.height=ary[1]+'px';
      }
      if (ms<mS){
       o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[1]=t;
       ary[0].style.height=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    zxcAccordian.init({
     ID:'tst',           // the unique ID name of the parent DIV.                  (string)
     SlideDuration:500,  //(optional) the slide duration in milli seconds.         (number, default = 1000)
     OpenHeight:100      //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>

  5. #5
    Join Date
    Oct 2011
    Posts
    42
    This is great! Thanks so much!
    But is there a way that the opening divs can be auto in height? Some states have more content than others at times...and it seems like it's fixed at 200? But when I change it to auto it doesn't seem to work?

  6. #6
    Join Date
    Nov 2010
    Posts
    1,085
    take out the openHeight line in the init function:
    Code:
    zxcAccordian.init({
     ID:'tst',           // the unique ID name of the parent DIV.                  (string)
     SlideDuration:500  //(optional) the slide duration in milli seconds.         (number, default = 1000)
    });
    and remove height:200px from the content class in the css

  7. #7
    Join Date
    Oct 2011
    Posts
    42
    Awesome! That did the trick
    thanks so much.

    One last question (hopefully heh). I went to paste this into our Content management system to test it before I filled everything in. And it doesn't seem to be working as should. Do you know what the problem could be?? I attached what it looks like when previewing on our staging site.

    printscreen_accordian.jpg

    *In our CMS there are separate areas for script, css and html.

    Thanks again.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,085
    it could be any number of things, maybe even depending on how your CMS compiles the page. can you put a demo page somewhere else on your site and provide a link?

  9. #9
    Join Date
    Oct 2011
    Posts
    42
    So my manager changed her mind and ended up being ok with the select multiple version. So I'm all good thanks so much xelawho for all your help!!

  10. #10
    Join Date
    Nov 2010
    Posts
    1,085
    haha. good to know we weren't the only ones going in circles!

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