Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2013
    Posts
    125
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question load content into div based on box clicked

    on my website : here


    I would like to load content into .slideTogglebox1 based on which box (1-5) has been clicked on using the slideup() and slideDown() function effect?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
      <title>{{FULLTITLEPAGE}} | {{SITE_TITLE}}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
      <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
      <link rel="shortcut icon" href="{{DOMAIN_DIRECTORY}}/local/images/favicon.ico">
    
    
    
      <script type="text/javascript" src="/public_scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
    
    	var clickCount=0;
         $("#slideToggle").click(function(){
         	if(clickCount%2==0){
         		$("#slideToggle").show();
         		$(this).text('Hide');
         	} else {	
            	$(this).text('Show');
          	}
          	clickCount++;
          });
    });
    </script>
    <link href="{{DOMAIN_DIRECTORY}}/local/css/stepup/reset.css" type="text/css" rel="stylesheet">
    <link href="{{DOMAIN_DIRECTORY}}/local/css/stepup/main.css" type="text/css" rel="stylesheet">
    <!--[if lt IE 9]>
    	<link rel="stylesheet" type="text/css" href="{{DOMAIN_DIRECTORY}}/local/css/stepup/ie.css" />
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <link rel="stylesheet" href="/public_scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    
    
    <!--[if lt IE 8]>
            <style type="text/css" >button{background:none !important;}</style>
    <![endif]-->
    
    </head>
    
    <body class="{{MODIFIER}} depth{{DEPTH}}">
    <div id="wrapper">
    	<header>	 
    	<div class="logo"><img src="{{DOMAIN_DIRECTORY}}/local/images/stepup/logo.png" alt="Logo" /></div>
    	<h1>OutsideIn: <br />Step Up!</h1>
    	<div class="clear"></div>
    		<div id="blocks">
    			<div class="slideTogglebox1"><p>box1</p></div>
    		</div>
    		<div class="slideTogglebox">
    		 	<ul id="boxmenu">
    		 		<li><a href="#">box 1</a></li>
    		 		<li><a href="#">box 2</a></li>
    		 		<li><a href="#">box 3</a></li>
    		 		<li><a href="#">box 4</a></li>
    		 		<li><a href="#">box 5</a></li>
    		 	</ul>
    		</div>	
    </header>
    <a href="#" id="slideToggle">Show</a>
    <script type="text/javascript">
     
     
    $("#slideToggle").click(function () {
       $('.slideTogglebox').slideToggle("slow");
    });
    
    $("#boxmenu").click(function () {
        $('.slideTogglebox1').slideDown();
    });
    
    
    
     
    $("#reset").click(function(){
    	location.reload();
    });
    </script>
    </div>
    </body>
    </html>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    please re clarify your intent. you want to load what content and how do you want to select the content based on the item clicked?

    where/when do you want the slidup and down to come into play?


  •  

    Posting Permissions

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