How to make expandable para or link?

futurecoder

07-02-2011, 09:47 AM

futurecoder

07-02-2011, 10:42 AM

Anyone ??

bullant

07-02-2011, 10:46 AM

Post the code you have so far and we can try to help you get it working.

vwphillips

07-02-2011, 11:57 AM

<!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

<!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>

bullant

07-02-2011, 12:35 PM

One option:

you'll have to get your own more and less icons for plusMinusPics = ['plus.png','minus.png'];

<!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>

oVTech

07-02-2011, 06:40 PM

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:

<!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> </p>

<p> </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> </p>
<p> </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> </p>
<p> </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> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>

garima

07-23-2012, 09:38 AM

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??

Philip M

07-23-2012, 10:19 AM

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>:-

<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