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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to make expandable para or link?

    I want to create a link which doesn't takes you to anew page but just expands to show it's information . Exactly like the one in FAQs where you click the question and the page expands to show you the answer.

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone ??

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Post the code you have so far and we can try to help you get it working.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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[*/
    .hide {
      overflow:hidden;width:200px;height:0px;
    }
    
    .answer {
      width:200px;height:200px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function FAQ(q){
     var obj=document.getElementById(q);
     obj.style.height=(obj.offsetHeight<2?obj.scrollHeight:0)+'px';
     if (FAQ.lst&&FAQ.lst!=obj){
      FAQ.lst.style.height='0px';
     }
     FAQ.lst=obj;
     return false;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <a href="#" onclick="return FAQ('d1');" >Question 1</a>
    
     <div id="d1" class="hide" >
      <div class="answer">Answer 1</div>
     </div>
    
     <a href="#" onclick="return FAQ('d2');" >Question 2</a>
    
     <div id="d2" class="hide" >
      <div class="answer">Answer 2</div>
     </div>
    
    </body>
    
    </html>
    or

    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[*/
    .hide {
      overflow:hidden;width:200px;height:0px;
    }
    
    .answer {
      width:200px;height:200px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function FAQ(q){
     var obj=document.getElementById(q);
     obj.style.height=(obj.offsetHeight<2?obj.scrollHeight:0)+'px';
     return false;
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <a href="#" onclick="return FAQ('d1');" >Question 1</a>
    
     <div id="d1" class="hide" >
      <div class="answer">Answer 1</div>
     </div>
    
     <a href="#" onclick="return FAQ('d2');" >Question 2</a>
    
     <div id="d2" class="hide" >
      <div class="answer">Answer 2</div>
     </div>
    
    </body>
    
    </html>
    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/

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option:

    you'll have to get your own more and less icons for plusMinusPics = ['plus.png','minus.png'];
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                ul {
                    list-style-type: none
                }
                .more_content {
                    margin: 10px 0px 0px 50px;
                    padding: 5px 5px 5px 5px;
                    width: 200px;
                    height: 100px;
                    border: 1px solid black;
                    overflow: auto;
                    display: none
                }
                span {
                    padding: 0px 0px 0px 50px;
                }
                span:hover {
                    cursor: pointer;
                }
            </style>
            <script type="text/javascript">
                function showHideMore(obj) {
                    var contObj = obj.parentNode.getElementsByTagName('div')[0];
                    var status = (contObj.style.display == 'block')? 'none' : 'block'
                    contObj.style.display = status;
                    obj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
                    obj.curPic = (obj.curPic == 0)? 1 : 0;
                    obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
                }
                window.onload=function(){
                    plusMinusPics = ['plus.png','minus.png'];
                    oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
                    for(i=0; i < oMoreLessSpans.length; i++){
                        oMoreLessSpans[i].curPic = 0;
                        oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
                        oMoreLessSpans[i].onclick=function(){showHideMore(this);}
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <ul id="list1">
                    <li>
                        <div>
                            <span>Show more</span>
                            <div class="more_content">More 1 content</div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>Show more</span>
                            <div class="more_content">More 2 content</div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>Show more</span>
                            <div class="more_content">More 3 content</div>
                        </div>
                    </li>
                </ul>
            </div>
        </body>
    </html>

  • #6
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by futurecoder View Post
    I want to create a link which doesn't takes you to anew page but just expands to show it's information . Exactly like the one in FAQs where you click the question and the page expands to show you the answer.

    Try this:
    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">
    <head>
    <title>Multiple Toggles Switch</title>
    <style type="text/css">
    	a {
    	 text-decoration: none;
    	 outline: none;
    	}
    	div#page {
    		margin: 60px auto;
    		width: 910px;
    	}
    	div.TogWrap {
    		width: 400px;
    		padding: 22px;
    	}
    	a.togTrigger {
    		border: 1px solid #bebebe;
    		padding: 7px 8px;
    		background: #df7623;
    		color: #fcfcfc;
    	}
    	a.togTriggerOn {
    		border: 1px solid #ababab;
    		padding: 7px 8px;
    		background: #ea4623;
    		color: #fcfcfc
    	}
    	.togContent  {
    		margin-top: 7px;
    		border: 1px solid #bebebe;
    		padding: 16px 10px 10px 10px;
    		background: #ededed;
    	}
    </style>
    <script type="text/javascript">
    /* <![CDATA[ *///oVTech
    	
    	function processEvent (eventObj, event, codeToEexcute) {
    		if (eventObj.addEventListener) { 
    			eventObj.addEventListener(event, codeToEexcute, false );
    			return true;
    		}		
    		else if (eventObj.attachEvent) {
    			event = "on" + event; 
    			eventObj.attachEvent(event, codeToEexcute);
    		}
    		else {
    			eventObj['on' + event] = codeToEexcute;
    		}
    	}
    	function cancelEvent(event) {
    		if (event.preventDefault) {
    			event.preventDefault(); 
    			event.stopPropagation(); //Prevents bubbling up 
    		}			
    		else  {
    			event.returnValue = false; 
    			event.cancelBubble = true; //Prevents bubbling up in IE
    		}
    	}
    
    	var oVTog = {
    	initoggle: function (thisEl, thisContent) {
    			var el = document.getElementById(thisEl);
    			var content = document.getElementById(thisContent);
    			content.style.display = "none";
    
    			var toggle = function (event) {
    					switch (event.type) {
    						case 'click':
    							content.style.display = content.style.display === 'none' ? '' : 'none';
    							el.className = content.style.display === 'none' ? 'togTrigger' : 'togTriggerOn';
    							break;
    						case 'mouseover':
    							content.style.display = '';
    							break;
    						case 'mouseout':
    								processEvent (content, 'mouseover', toggle);
    								processEvent (content, 'mouseout', toggle);
    								cancelEvent(event);
    							content.style.display = 'none';
    							break;
    						default: 
    							//none
    					}
    					cancelEvent(event);
    				};
    			 processEvent (el, 'click', toggle);//if you want a hover effect, comment this out & uncomment the mouseover-mouseout events 
    			 //processEvent (el, 'mouseover', toggle);//Optional
    			 //processEvent (el, 'mouseout', toggle);//Optional
    			}
    	};//End oVTog
    	function initTog () {
    	var allTriggers = ['togTrigger1', 'togTrigger2', 'togTrigger3', 'togTrigger4']; //IDs for triggers
    	var allContents = ['content1', 'content2', 'content3', 'content4']; //IDs for the hide/show content
    		for (var i=0, arrLen=allTriggers.length; i<arrLen; i++) {
    			oVTog.initoggle (allTriggers[i], allContents[i]);
    			
    		}
    	}//End initTog 
    	window.onload = function () {
    		initTog ();
    	};
    	
    	
    	
    /* ]]> */
    </script>
    </head>
    <body id="bd">
    <h1>Multiple Toggles</h1>
    
    		<div id ="wrapper">			
    				<strong>A</strong>
    
    				<div class="TogWrap">
    					<a href="#" id="togTrigger1" class="togTrigger">Lorem ipsum One</a>
    					<p id ="content1" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.<a href="##" onmouseover="this.style.backgroundColor = 'red'">RED</a>
    					</p>
    				</div>
    
    				<p>&nbsp;</p>
    
    				<p>&nbsp;</p>
    				
    				<strong>B</strong>
    	`			<div class="TogWrap">
    					  <a href="#"  id="togTrigger2" class="togTrigger">Lorem ipsum One</a>
    					  <p  id ="content2" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.
    					  </p>
    				 </div>
    
    				 
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>	
    				
    				<strong>C</strong>
    				<div class="TogWrap">
    					<a href="#" id="togTrigger3" class="togTrigger">Lorem ipsum One</a>
    					<p id ="content3" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.
    					</p>
    				</div>
    
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				
    				<strong>D</strong>
    				<div class="TogWrap">
    					  <a href="#"  id="togTrigger4" class="togTrigger">Lorem ipsum One</a>
    					  <p  id ="content4" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.
    					  </p>
    
    				 </div>
    				 
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>	
    		</div><!--End wrapper-->
    </body>
    </html>




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #7
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in the above code if we wish to remove the spaces between the links and want them to be placed together , one after the other. how we will do this??

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,015
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by garima View Post
    in the above code if we wish to remove the spaces between the links and want them to be placed together , one after the other. how we will do this??
    Change the <div>s to <span>s and delete the <p> and </p>:-

    Code:
    <div id ="wrapper">			
    				<strong>A</strong>
    
    				<span class="TogWrap">
    					<a href="#" id="togTrigger1" class="togTrigger">Lorem ipsum One</a>
    					<p id ="content1" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.
    					<a href="##" onmouseover="this.style.backgroundColor = 'red'">RED</a>
    					</p>
    				</span>
    				
    				
    				<strong>B</strong>
    				<span class="TogWrap">
    					  <a href="#"  id="togTrigger2" class="togTrigger">Lorem ipsum Two</a>
    					  <p  id ="content2" class="togContent">
    					  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
    					  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
    					  convallis, sagittis vitae, convallis sit amet, lectus.
    					  </p>
    				 </span>

    "Merely corroborative detail, intended to add artistic verisimilitude to an otherwise bald and unconvincing narrative". W S Gilbert

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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