1. Zuhause
  2. Frage und Antwort
  3. öffnen spezifische Akkordeon Registerkarte mit Vanille JavaScript

öffnen spezifische Akkordeon Registerkarte mit Vanille JavaScript

2017-07-11 4 views
-1

Ich habe Code unten für einen Inhaltszyklus und ein Akkordeon direkt darunter (beide mit Pure CSS erstellt). Ist dies mit Vanilla JavaScript (keine jQuery) möglich, um es so zu machen, wenn ein Benutzer auf ein Top-Team aus dem Zyklus klickt, wird es den Top-Team-Akkordeon-Tab auswählen und öffnen, und dasselbe mit den anderen Tabs? Alles hilft, Prost.öffnen spezifische Akkordeon Registerkarte mit Vanille JavaScript

.container1 { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: absolute; 
 
    top: 45px; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin: auto; 
 
} 
 

 
.ele, .arrow, .circle { 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    margin: auto; 
 
} 
 

 
#one { 
 
    transform: rotate(0deg) translateY(-130px) rotate(0deg); 
 
} 
 
#two { 
 
    transform: rotate(60deg) translateY(-130px) rotate(-60deg); 
 
} 
 
#three { 
 
    transform: rotate(120deg) translateY(-130px) rotate(-120deg); 
 
} 
 
#four { 
 
    transform: rotate(180deg) translateY(-130px) rotate(-180deg); 
 
} 
 
#five { 
 
    transform: rotate(240deg) translateY(-130px) rotate(-240deg); 
 
} 
 
#six { 
 
    transform: rotate(300deg) translateY(-130px) rotate(-300deg); 
 
} 
 

 

 
.ele { 
 
    display: inline-block; 
 
    background-color: #1f497d; 
 
    width: 105px; 
 
    height: 50px; 
 
    border-width: 3px; 
 
    border-style: solid; 
 
    border-color: #ededed; 
 
    border-radius: 7px; 
 
    box-shadow: 0px 1px 5px #888888; 
 
} 
 

 
.ele:hover { 
 
    cursor:pointer; 
 
    transform:scale(1.019); 
 
    border-color:f4f4f4; 
 
    background-color:#214d84; 
 
    box-shadow: 0px 2px 9px #888888; 
 
    zoom:1.009; 
 
} 
 

 
.circle { 
 
    background-color: #006850; 
 
    width: 85px; 
 
    height: 85px; 
 
    border-width: 3px; 
 
    border-style: solid; 
 
    border-color: #fefefe; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 1px 5px #888888; 
 
} 
 

 
.arrow { 
 
    color: #d0d3d8; 
 
    width: 250px; 
 
    height: 250px; 
 
    border: 17px solid; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    z-index: -3; 
 
    left: -17px; 
 
} 
 

 
#two:hover ~ .arrow { 
 
    border-top-color: #006850; 
 
    transform: rotate(24deg); 
 
} 
 
#three:hover ~ .arrow { 
 
    border-top-color: #006850; 
 
    transform: rotate(66deg); 
 
} 
 
#four:hover ~ .arrow { 
 
    border-top-color: #006850; 
 
    border-right-color: #006850; 
 
    transform: rotate(25deg); 
 
} 
 
#five:hover ~ .arrow { 
 
    border-top-color: #006850; 
 
    border-right-color: #006850; 
 
    border-bottom-color: #006850; 
 
    transform: rotate(26deg); 
 
} 
 
#six:hover ~ .arrow { 
 
    border-top-color: #006850; 
 
    border-right-color: #006850; 
 
    border-bottom-color: #006850; 
 
    transform: rotate(66deg); 
 
} 
 
#one:hover ~ .arrow { 
 
    border-color: #006850; 
 
} 
 
#one:hover ~ .circle:after { 
 
    border-top-color: #006850; 
 
} 
 

 
.circle:before { 
 
    content: ""; 
 
    display: block; 
 
    width: 30px; 
 
    height: 30px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: -96px; 
 
    left: -36px; 
 
    background: #fff; 
 
    background-color: white; 
 
    transform: rotate(-120deg); 
 
    z-index: -1; 
 
} 
 

 
.circle:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #d0d3d8; 
 
    position: absolute; 
 
    top: -83px; 
 
    left: -44px; 
 
    transform: rotate(-120deg); 
 
} 
 

 
.text1line { 
 
    font-size:15px; 
 
    margin-top:14%; 
 
    display:block; 
 
    color:white; 
 
    text-decoration:none; 
 
    text-align:center; 
 
} 
 

 
.text2line { 
 
    font-size:15px; 
 
    margin-top:6%; 
 
    display:block; 
 
    color:white; 
 
    text-decoration:none; 
 
    text-align:center; 
 
} 
 

 
.textcircle { 
 
    font-size:17px; 
 
    margin-top:37.5%; 
 
    display:block; 
 
    color:white; 
 
    text-decoration:none; 
 
    text-align:center; 
 
} 
 

 
.wrapper { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* Acordeon styles */ 
 

 
.tab { 
 
    position: relative; 
 
    margin-bottom: 1px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.bold { 
 
    font-weight:bold; 
 
    color: #005bab; 
 
    } 
 

 
.top { 
 
    margin-top:-20px; 
 
    text-align: center; 
 
    font-size:13px; 
 
} 
 

 
.input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
.label { 
 
    position: relative; 
 
    text-align: center; 
 
    display: block; 
 
    padding: 0 0 0 1em; 
 
    color: #005bab; 
 
    background: #e2ecf6; 
 
    font-size: 14px; 
 
    font-family: Verdana; 
 
    font-weight: bold; 
 
    line-height: 6; 
 
    cursor: pointer; 
 
} 
 

 
.label:hover { 
 
    background-color: #d2e2ef; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    -webkit-transition: max-height .5s; 
 
    -o-transition: max-height .5s; 
 
    transition: max-height .5s; 
 
    padding-left: 35px; 
 
    background: #dce7f2; 
 
} 
 

 
.tab-content .container { 
 
    padding: 1em; 
 
    margin: 0; 
 
    opacity: 0; 
 
    transform: scale(0.75); 
 
    -webkit-transition: transform 0.75s, opacity .75s; 
 
    -o-transition: transform 0.75s, opacity .75s; 
 
    transition: transform 0.75s, opacity .75s; 
 
    background: #f4f8fc; 
 
} 
 

 

 
/* :checked */ 
 

 
.input:checked~.tab-content { 
 
    max-height: 35em; 
 
} 
 

 
.input:checked~.tab-content .container { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
} 
 

 
/* Icon */ 
 

 
.label::after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: block; 
 
    width: 3em; 
 
    height: 3em; 
 
    line-height: 3; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
.input[type=checkbox]+.label::after { 
 
    content: "+"; 
 
} 
 

 
.input[type=radio]+.label::after { 
 
    content: ""; 
 
} 
 

 
.input[type=checkbox]:checked+.label::after { 
 
    transform: rotate(315deg); 
 
} 
 

 
.input[type=radio]:checked+.label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
.bottombar { 
 
    content: ""; 
 
    display: block; 
 
    height: 1em; 
 
    width: 100%; 
 
    background-color: #00688B; 
 
}
<div class="container1"> 
 
    <div class="ele" id="one"><a class="text2line" href="">Select A Top Team</a></div> 
 
    <div class="ele" id="two"><a class="text2line" href="">Get Off To A Great Start</a></div> 
 
    <div class="ele" id="three"><a class="text2line" href="">Train For Success</a></div> 
 
    <div class="ele" id="four"><a class="text2line" href="">Manage Work For Results</a></div> 
 
    <div class="ele" id="five"><a class="text1line" href="">Grow Careers</a></div> 
 
    <div class="ele" id="six"><a class="text2line" href="">Build A Deep Bench</a></div> 
 
    <div class="arrow"></div> 
 
    <div class="circle"><a class="textcircle">Manager</a></div> 
 
</div> 
 
<br style="line-height:400px;"/> 
 
<div class="top"> 
 
    <p> 
 
     <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
 
</div> 
 
<div class="wrapper"> 
 
    
 
    
 
    
 
    <div class="tab"> 
 
    <input name="tabs" class="input" id="tab-one" type="checkbox"/> 
 
     <label class="label" for="tab-one">Select A Top Team</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
       <p>Content goes here</p> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    
 
    
 
    <div class="tab"> 
 
    <input name="tabs" class="input" id="tab-two" type="checkbox" /> 
 
    <label class="label" for="tab-two">Get Off To A Great Start</label> 
 
    <div class="tab-content"> 
 
     <div class="container"> 
 
     
 
     <p>Content goes here</p> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
<div class="tab"> 
 
    <input name="tabs" class="input" id="tab-train" type="checkbox"/> 
 
     <label class="label" for="tab-train">Train For Success</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
       <p>Content goes here</p> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 

 
<div class="tab"> 
 
    <input name="tabs" class="input" id="tab-manage" type="checkbox"/> 
 
     <label class="label" for="tab-manage">Manage Work For Results</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
       <p>Content goes here</p> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 

 
<div class="tab"> 
 
    <input name="tabs" class="input" id="tab-grow" type="checkbox"/> 
 
     <label class="label" for="tab-grow">Grow Careers</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
       <p>Content goes here</p> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 

 
<div class="tab"> 
 
    <input name="tabs" class="input" id="tab-build" type="checkbox"/> 
 
     <label class="label" for="tab-build">Build A Deep bench</label> 
 
     <div class="tab-content"> 
 
      <div class="container"> 
 
       
 
       <p>Content goes here</p> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    
 
    <div class="bottombar"></div> 
 
    
 
</div>

Quelle

2017-07-11 Cole Gwozdecki

+0

Wo das Javascript, das die Akkordeons öffnet? Das würden wir auch brauchen – sn3ll

+0

@ sn3ll Alles fertig von Pure CSS jetzt –

Antwort

1

eine Veränderung in Ihrem HTML-Marke:

<div class="ele" id="one" data-checkbox-id="tab-one"><a class="text2line" href="">Select A Top Team</a></div> 
    <div class="ele" id="two" data-checkbox-id="tab-two"><a class="text2line" href="">Get Off To A Great Start</a></div> 
    <div class="ele" id="three" data-checkbox-id="tab-train"><a class="text2line" href="">Train For Success</a></div> 
    <div class="ele" id="four" data-checkbox-id="tab-manage"><a class="text2line" href="">Manage Work For Results</a></div> 
    <div class="ele" id="five" data-checkbox-id="tab-grow"><a class="text1line" href="">Grow Careers</a></div> 
    <div class="ele" id="six" data-checkbox-id="tab-build"><a class="text2line" href="">Build A Deep Bench</a></div>

Bitte versuchen Sie dieses Skript hinzufügen:

(function() { 
    var currentOpenTab; 
    var elements = document.getElementsByClassName("ele"); 
    for (var i=0; i<elements.length; i++) { 
     elements[i].firstChild.addEventListener("click", elementClicked); 
    } 

    function elementClicked(e) { 
     e.preventDefault(); 
     var targetId = e.target.parentNode.attributes["data-checkbox-id"].value; 
     var checkbox = document.getElementById(targetId); 
     if (checkbox.checked === true) { 
      checkbox.checked = false; 
     } 
     else { 
      checkbox.checked = true; 
      if (currentOpenTab !== undefined) { 
       currentOpenTab.checked = false; 
      } 
      currentOpenTab = checkbox; 
     } 
    } 
}());

Quelle

2017-07-11 17:19:39 elvirus

+0

Tut nichts –

+0

Sorry, ich habe vergessen, die Markup-Änderungen hinzuzufügen – elvirus

+0

Das ist genial, aber Ihr Code macht den Kreis Pfeil dissepear –

-1

Die Arbeit unten wird, aber es ist in Not einiger verzweifelter Refactoring.

HTML

<div class="container1"> 
     <div class="ele" id="one" data-item="one">Select A Top Team</div> 
     <div class="ele" id="two" data-item="two">Get Off To A Great Star</div> 
     <div class="ele" id="three" data-item="three">Train For Success</div> 
     <div class="ele" id="four" data-item="four">Manage Work For Result</div> 
     <div class="ele" id="five" data-item="five">Grow Career</div> 
     <div class="ele" id="six" data-item="six">Build A Deep Bench</div> 
     <div class="arrow"></div> 
     <div class="circle"><a class="textcircle">Manager</a></div> 
    </div> 
    <br style="line-height:400px;"/> 
    <div class="top"> 
     <p> 
      <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
    </div> 
    <div class="wrapper"> 



     <div class="tab item-one"> 
     <input name="tabs" class="input" id="tab-one" type="checkbox"/> 
      <label class="label" for="tab-one">Select A Top Team</label> 
      <div class="tab-content"> 
       <div class="container"> 

        <p>Content goes here</p> 

       </div> 
      </div> 
     </div> 



     <div class="tab item-two"> 
     <input name="tabs" class="input" id="tab-two" type="checkbox" /> 
     <label class="label" for="tab-two">Get Off To A Great Start</label> 
     <div class="tab-content"> 
      <div class="container"> 

      <p>Content goes here</p> 

      </div> 
     </div> 
     </div> 

    <div class="tab item-three"> 
     <input name="tabs" class="input" id="tab-train" type="checkbox"/> 
      <label class="label" for="tab-train">Train For Success</label> 
      <div class="tab-content"> 
       <div class="container"> 

        <p>Content goes here</p> 

       </div> 
      </div> 
     </div> 

    <div class="tab item-four"> 
     <input name="tabs" class="input" id="tab-manage" type="checkbox"/> 
      <label class="label" for="tab-manage">Manage Work For Results</label> 
      <div class="tab-content"> 
       <div class="container"> 

        <p>Content goes here</p> 

       </div> 
      </div> 
     </div> 

    <div class="tab item-five"> 
     <input name="tabs" class="input" id="tab-grow" type="checkbox"/> 
      <label class="label" for="tab-grow">Grow Careers</label> 
      <div class="tab-content"> 
       <div class="container"> 

        <p>Content goes here</p> 

       </div> 
      </div> 
     </div> 

    <div class="tab item-six"> 
     <input name="tabs" class="input" id="tab-build" type="checkbox"/> 
      <label class="label" for="tab-build">Build A Deep bench</label> 
      <div class="tab-content"> 
       <div class="container"> 

        <p>Content goes here</p> 

       </div> 
      </div> 
     </div> 


     <div class="bottombar"></div> 

    </div>

JS

hideAllTabs(); 

var items = document.querySelectorAll('.container1 .ele'); 

for(var i = 0; items.length > i; i++) { 
    items[i].addEventListener('click', function(evt) { 
     hideAllTabs(); 
     var tabNo = evt.target.getAttribute('data-item'); 
     var tab = document.querySelector('.item-' + tabNo); 

     if (tab) { 
      tab.style.display = 'block'; 
     } 
    }); 
} 

function hideAllTabs() { 
    var tabs = document.querySelectorAll('.tab'); 

    if (tabs.length > 0) { 
     for(var idx = 0; tabs.length > idx; idx++) { 
      tabs[idx].style.display = 'none'; 
     } 
    } 
}

Quelle

2017-07-11 16:11:39 tjcafferkey

+0

Funktioniert nicht. Tabs sollen sich öffnen, Ihr Code lässt die Überschrift einfach erscheinen. –

-1

Hier ist ein funktionierendes Beispiel https://codepen.io/RTakes/pen/WOLbPg

ein Ziel zu jedem Ihrer Zyklus Links hinzufügen:

<div class="ele" id="one"><a class="text2line" href="#tab-one">Select A Top Team</a></div> 
    <div class="ele" id="two"><a class="text2line" href="#tab-two">Get Off To A Great Start</a></div> 
    <div class="ele" id="three"><a class="text2line" href="#tab-train">Train For Success</a></div> 
    <div class="ele" id="four"><a class="text2line" href="#tab-manage">Manage Work For Results</a></div> 
    <div class="ele" id="five"><a class="text1line" href="#tab-grow">Grow Careers</a></div> 
    <div class="ele" id="six"><a class="text2line" href="#tab-build">Build A Deep Bench</a></div>

Und die JS:

//Coerce to an array 
const cycleLinks = [].slice.call(document.querySelectorAll('.text2line')); 

cycleLinks.forEach((element, index) => { 
    element.onclick = (event) => { 
    event.preventDefault(); 
    const target = element.href.split("#")[1];  
    //Uncheck all 
    uncheckAll(); 

    //Expand target 
    document.getElementById(target).checked = true; 
    } 

}) 

function uncheckAll() { 
    //Coerce to an array 
    const inputs = [].slice.call(document.querySelectorAll('.input')); 
    inputs.forEach((element, index) => { 
    element.checked = false; 
    }) 
}

Quelle

2017-07-11 16:26:49 RickTakes

+0

Funktioniert nicht für mich –

+0

Haben Sie das Beispiel für die Arbeit mit dem Codepen vor der Abstimmung versucht? – RickTakes

+0

Code Pen hat nicht funktioniert nichts heppens –

Verwandte Themen

 Verwandte Themen