Question

I’ve scowered this site trying to find a similar issue, but so far no luck. Hoping perhaps someone here would know the answer :).

I found this site that had show/hide scrolling code which seemed to work well enough for what I wanted. I’ve implemented it, and it works fine on Firefox. The scrolling also works fine on Chrome except for the fact that the videos in the “hidden” portion tends to show up in the top left hand corner. To trigger this, click on a different link (i.e. poetry, get involved etc) and click back to music, that’s when it messes up. I’ve included the code in the header as well as the page for “music”. I’ve used the same code in the poetry section, and no issues with the text. Perhaps it has to do with the iframe? Thanks so much!

leclairstudios.ca

Head:

    <style type="text/css">
.dhtmlgoodies_question{ /* Styling question */
    /* Start layout CSS */
    width:500px;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:2px;
    height:20px;

    /* End layout CSS */
    cursor:pointer;
}

.dhtmlgoodies_question:hover{
color: red ;
}

.dhtmlgoodies_answer{   /* Parent box of slide down content */
    /* Start layout CSS */

    background-color:#e6e5f8;


    /* 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">
/************************************************************************************************************
Show hide content with slide effect
Copyright (C) August 2010  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

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

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;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.

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 && !dhtmlgoodies_expandMultiple){
            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;

Music:

<br /><br />
            <p> Click song name to expand video - page currently best viewed with Firefox</p>
            <hr>
            <br />
            <div class="dhtmlgoodies_question"><p>Eli, The Barrow Boy</p></div>
            <div class="dhtmlgoodies_answer">
                <div>
                <iframe width="420" height="315" src="http://www.youtube.com/embed/NEF8N-5zVMU" frameborder="0" allowfullscreen>        
                </iframe>
                </div>
            </div>
            <br />
            <div class="dhtmlgoodies_question"><p> Pussywillows, Cattails, Softwinds, and Roses </p></div>
            <div class="dhtmlgoodies_answer">
                <div>
                <iframe width="420" height="315" src="http://www.youtube.com/embed/R7XOiSmh7ik" frameborder="0" allowfullscreen>
                </iframe>
                </div>
            </div>
            <br />
            <div class="dhtmlgoodies_question"><p>Chasing Cars</p></div>
            <div class="dhtmlgoodies_answer">
                <div>
                <iframe width="420" height="315" src="http://www.youtube.com/embed/ZTm6--Bu7W8" frameborder="0" allowfullscreen>
                </iframe>
                </div>
            </div>

Answer 1

Consider jquery?

$('.dhtmlgoodies_question').click(function(e){
    e.preventDefault();
    $('.dhtmlgoodies_answer_content').slideUp;
    $(this).next().slideDown(500);
});