dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Help With Expanding Sections of Website

  1. #1
    Join Date
    Nov 2011
    Posts
    82

    resolved [RESOLVED] Help With Expanding Sections of Website

    I have some code that I want amend, but I can't seem to get it to work. Sorry I know it's kind of long, but what I am looking for is to create a default state where Link 1 is "open" with the content viewable. Also, I wanted to see if it's easy enough to set the height to 100% and not a fixed height so it can expand relative to the content. You can view the demo here: http://andyrichin.com/demo/

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - demo</title>
      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools.js'></script>
       <link rel="stylesheet" type="text/css" href="slider_style.css">
    
    </head>
    
    <body>
    
      <div>
        <div class="one">
            <a href="#" class="trigger">link 1</a>
        </div>
        <div class="middle">
            <a href="#" class="close">+</a>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget lectus sed eros blandit elementum. Morbi sed lorem et nisl feugiat dignissim. Sed mi mauris, scelerisque at vehicula sed, ultricies vel erat.</p>
        </div>
        <div class="two">
            <a href="#" class="trigger">link 2</a>
        </div>
        <div class="middle2">
            <a href="#" class="close">+</a>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget lectus sed eros blandit elementum. Morbi sed lorem et nisl feugiat dignissim. Sed mi mauris, scelerisque at vehicula sed, ultricies vel erat.</p>    
    	</div>
        <div class="three">
            <a href="#" class="trigger">link 3</a>
        </div>
        <div class="middle3">
            <a href="#" class="close">+</a>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget lectus sed eros blandit elementum. Morbi sed lorem et nisl feugiat dignissim. Sed mi mauris, scelerisque at vehicula sed, ultricies vel erat.</p>    
    	</div>
        <div class="bottom"></div>
            
    </div>
      
    <script type='text/javascript'>
      //![CDATA[ 
     
      
      $$('.one a').addEvent('click', function(event){
        var middle = $$('.middle')[0];
        var middle2 = $$('.middle2')[0];
        var middle3 = $$('.middle3')[0];
        
        if( '0px' == middle.getStyle('height') ){
            middle.tween('height', '300');
            middle2.tween('height', '0');
            middle3.tween('height', '0');
    
        }else{
            middle.tween('height', '0');
        }
        
        event.preventDefault();
    });
    
    $$('.two a').addEvent('click', function(event){
        var middle2 = $$('.middle2')[0];
        var middle = $$('.middle')[0];
        var middle3 = $$('.middle3')[0];
        
        if( '0px' == middle2.getStyle('height') ){
            middle2.tween('height', '300');
            middle.tween('height', '0');
            middle3.tween('height', '0');
        }else{
            middle2.tween('height', '0');
        }
        
        event.preventDefault();
    });
    
    $$('.three a').addEvent('click', function(event){
        var middle3 = $$('.middle3')[0];
        var middle = $$('.middle')[0];
        var middle2 = $$('.middle2')[0];
        
        if( '0px' == middle3.getStyle('height') ){
            middle3.tween('height', '300');
            middle.tween('height', '0');
            middle2.tween('height', '0');
        }else{
            middle3.tween('height', '0');
        }
        
        event.preventDefault();
    });
    
    $$('.close').addEvent('click', function(event){
        var middle3 = $$('.middle3')[0];
        var middle = $$('.middle')[0];
        var middle2 = $$('.middle2')[0];
        
        if( '0px' == middle2.getStyle('height') ){
            middle3.tween('height', '0');
            middle.tween('height', '0');
            middle2.tween('height', '0');
        }else{
            middle2.tween('height', '0');
        }
    	
    	if( '0px' == middle.getStyle('height') ){
            middle3.tween('height', '0');
            middle.tween('height', '0');
            middle2.tween('height', '0');
        }else{
            middle2.tween('height', '0');
        }
    	
    	if( '0px' == middle3.getStyle('height') ){
            middle3.tween('height', '0');
            middle.tween('height', '0');
            middle2.tween('height', '0');
        }else{
            middle2.tween('height', '0');
        }
        
        event.preventDefault();
    });
      //]]> 
      </script>
      
    </body>
    
    
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    wtf for do you try to rewrite already existing jQuery things with mootools?!

  3. #3
    Join Date
    Nov 2011
    Posts
    82
    Quote Originally Posted by Padonak View Post
    wtf for do you try to rewrite already existing jQuery things with mootools?!
    At least if you're going to insult me in English do it correctly. "Wtf for do you try..." Idiot. Thanks for the help never claimed to be an expert coder.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    i'm not good in English, sorry, but i didn't mean to insult you. i'm learning the language by myself and sometimes i don't use it correctly. anyway, the question stays the same

  5. #5
    Join Date
    Nov 2011
    Posts
    82
    Quote Originally Posted by Padonak View Post
    i'm not good in English, sorry, but i didn't mean to insult you. i'm learning the language by myself and sometimes i don't use it correctly. anyway, the question stays the same
    I understand, no worries. I'm not really sure, I wasn't trying to use both. I took this code from somewhere and was trying to manipulate. Is there something else you could suggest? Thanks.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    as i said, there is no need to rewrite already existing things. you like that jquery demo and it almost fits your needs. if you would like the sections to expand relative to the content, it can be easily achived by adding a couple of javascript lines (see $(document).ready() in the demo code).

    p.s. your demo page has errors (more than one same id attributes which must be unique for each element) - http://www.w3schools.com/tags/att_global_id.asp

  7. #7
    Join Date
    Nov 2011
    Posts
    82
    Thanks a lot! I appreciate it.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    anytime ))

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