Advertisement

Sub content panel

Moderator: Calcifer

Sub content panel

Postby heart2soul » Wed Dec 02, 2009 1:29 pm

Hi,
I found your coding very interesting.
i have used it but i need some help, how can i make this use as sub menu effect, I want to open the panel within the panel....

can you please help me the coding is given below.

---------------------------------------------

<style type="text/css">

body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
margin:0px;

}

.dhtmlgoodies_question{ /* Styling question */
/* Start layout CSS */
color:#FFF;
font-size:0.9em;
background-color:#317082;
width:430px;
margin-bottom:2px;
margin-top:2px;
padding-left:2px;
background-image:url('images/bg_answer.gif');
background-repeat:no-repeat;
background-position:top right;
height:20px;

/* End layout CSS */

overflow:hidden;
cursor:pointer;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
border:1px solid #317082;
background-color:#E2EBED;
width:400px;

/* End layout CSS */

visibility:hidden;
height:0px;
overflow:hidden;
position:relative;

}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
padding:1px;
font-size:0.9em;
position:relative;
}

</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

objectIdToSlideDown = false;

if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{

answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';

slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}

function slideContent(inputId,direction)
{

var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}

obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}



function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>

------------------------]
BODY

<div class="dhtmlgoodies_question">Q: What are the advantages of table less design?</div>
<div class="dhtmlgoodies_answer">
<div>
Ohh! There are so many:
<ul>
<li>Faster loading pages</li>
<li>Smoother loading pages</li>
<li>Saved bandwidth</li>
<li>Separate layout and content</li>
<li>Easy to change layout</li>
<li>Increased accessibility</li>
<li>Different styling for different media(print, screen, pda)</li>
</ul>
</div>
</div>
<div class="dhtmlgoodies_question">Q: What is the difference between the div and span tag ?</div>
<div class="dhtmlgoodies_answer">
<div>
DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
</div>
</div>
<div class="dhtmlgoodies_question">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
<div>
dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of
DHTML scripts you can use freely to enhance your website.
</div>
</div>
heart2soul
 
Posts: 1
Joined: Wed Dec 02, 2009 1:20 pm

Return to Code for new features/extensions

Who is online

Users browsing this forum: No registered users and 5 guests