Objetivo do Web Scriptum

Criei este blog como repositório de scripts e códigos que criei ao longo de anos de trabalho e que continuo criando. Muitos me ajudaram, esta é minha hora de ajudar.

Accordion com links, caixa de texto e iframe

Se você estava procurando um script de accordion vulgarmente chamado de sanfona, mas não tem ideia de qual tipo precisa, se para exibir links, textos ou mesmo embutir iframes, minha sugestão abaixo contempla os 3 tipos de uso. Basta que escolha o que deseja, exclui os outros e customiza.



SEÇÃO 1 - links

TITULO - caixas de texto

SEÇÃO - página em iframe


PASSO 1
Copie e cole estes dois blocos (CSS e JAVASCRIPT) antes de </ head >

<style>
body {
color:#000000;
text-align:left;
padding: 5px;
}
.title {
font-size: 16px;
cursor: pointer;
border: 1px solid #01CCFF; border-image: none; color: #ff0000; padding: 7px;
}
a {
font-size: 14px;
padding: 10px;
display:block;
color:#054A72;
text-decoration:none;
}
a:hover {
color:#ffffff;
background: #054A72;
text-decoration:none;
}
</style>

<script>
document.onclick = Gry_Click;

function Gry_Click(GRY) {
    GRY = (GRY) ? GRY : ((window.event) ? event : null ) ;
    var target = (GRY.target) ? GRY.target : ((GRY.srcElement) ? GRY.srcElement : null ) ;
    GRYClick(target) ;
    GRY.cancelBubble ;
}

function GRYClick(target) {
    if (target.id) {
        ObjectID = target.id ;
        ObjectType = ObjectID.substring(0,5) ;
        ObjectNyyum = ObjectID.substring(2) ;
        switch(ObjectType) {
        case 'TITLE' :
            ItemId = getTpcId(target) ;
            Gryid(ItemId) ;
            return ;
            break ;
        case 'LK' :
            ItemId = getTpcId(target) ;
            setMark(ItemId) ;
            return ;
        default:
            break ;
        }
    }
}

function Gry_GRYenuValue(target,styleProp, IEStyleProp) {
    if (target.currentStyle) return target.currentStyle[ IEStyleProp ] ;
    else if (window.getComputedStyle) {
        compStyle = window.getComputedStyle(target,'') ;
        return compStyle.getPropertyValue(styleProp) ;
    }
}

function getTpcId(obj) {
    if (obj.id && obj.id.substring(0,5)=='IITEM' ) {
        return obj.id.substring(6,38) ;
    }
    if (!obj.parentNode) return null;
    return getTpcId(obj.parentNode) ;
}
function Gryid(id) {
    var item = document.getElementById('IITEM-'+id) ;
    var i ;
    for (i=0; i<item.childNodes.length; i++)
    if (item.childNodes[i].id && item.childNodes[i].id.substring(0,5)=='ICONT') {
        content = item.childNodes[i] ;
        break ;
    }
    status =  Gry_GRYenuValue(content,'display','display')  ;
    if (status!='block') {
        content.style['display'] = 'block' ;
        item.style['background'] = Gry_GRYenuValue(document.getElementById('c2'),'color','color') ;
    } else {
        content.style['display'] = 'none' ;
        item.style['background'] = Gry_GRYenuValue(document.getElementById('c1'),'color','color') ;
    }
}

function toggGry(GyName) {
    object = document.getElementById(GyName) ;
    if (object.disabled==true) object.disabled=false ;
    else object.disabled=true;
}
</script>


PASSO 2
Copie e cole este bloco de código abaixo depois de < body >

<div id="main" style="text-align: center">
    <div class="item" id="IITEM-1"><span class="sect"></span><div id="section">
<span class="title" id="TITLE1">SEÇÃO 1 - links</span></div><div style="display: none;" class="open" id="ICONT1"><br>
                <a href="#"><b>Página 1</b></a>
                <a href="#"><b>Página 2</b></a></div><p></p>

     <div class="item" id="IITEM-2"><span class="sect"></span><div id="section">
<span class="title" id="TITLE2">TITULO - caixas de texto</span></div><div style="display: none; width:60%;" class="open" id="ICONT2">
        <p>Lorem ipsum<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div><p></p>

<div class="item"><div class="item" id="IITEM-3"><span class="sect"></span><div id="section">
<span class="title" id="TITLE3">SEÇÃO - página em iframe</span></div><div style="display: none;" class="open" id="ICONT3"><br>
            <iframe id="main" src="http://nicknipigon.blogspot.com.br/" scrolling="no" frameborder="0"  frameborder="0"  frameborder="0" style="height:200; width:100%"></iframe></div>


DICA:Observe cada IITEM é ele que você escolherá para ficar na sua página. Para ter dois ou mais da opção escolhida basta copia o bloco colar abaixo e renomear IITEM- e ICONT