css - Can you put a link in an accordion or not? -
i've installed simple css accordion, , works fine.
i've heavily adapted one: http://codepen.io/pollardld/pen/lthaf (actually, 1 similar although don't have source address).
question: there's text @ top (closed position) click , opens. want that, want put text @ left (the site name , link) link , not open accordion. possible, though (without using absolute-positioned link overlayed z-index, fallback if no experienced coder here knows cleaner, cheaper solution.
thanks
reference code (not necessary question required stack because linked codepen:
<h3>accordion</h3> <div class="accordion"> <!-- span target fix closing accordion --> <span class="target-fix" id="accordion"></span> <!-- first accoridon option --> <div> <!-- span target fix accordion --> <span class="target-fix" id="accordion1"></span> <!-- link open accordion, hidden when open --> <a href="#accordion1" id="open-accordion1" title="open">first accordion</a> <!-- link close accordion, hidden when closed --> <a href="#accordion" id="close-accordion1" title="close">first accordion</a> <!-- accorion content goes in div --> <div class="accordion-content"> <p>accordion 1 content</p> </div> </div> <!-- second accoridon option --> <div> <span class="target-fix" id="accordion2"></span> <a href="#accordion2" id="open-accordion2" title="open">second accordion</a> <a href="#accordion" id="close-accordion2" title="close">second accordion</a> <div class="accordion-content"> <p>accordion 2 content.</p> </div> </div> <!-- third accoridon option --> <div> <span class="target-fix" id="accordion3"></span> <a href="#accordion3" id="open-accordion3" title="open">third accordion</a> <a href="#accordion" id="close-accordion3" title="close">third accordion</a> <div class="accordion-content"> <p>accordion 3 content</p> </div> </div> </div> <div class="accordion blue"> <!-- span target fix closing accordion --> <span class="target-fix" id="accordion"></span> <!-- first accoridon option --> <div> <!-- span target fix accordion --> <span class="target-fix" id="accordion4"></span> <!-- link open accordion, hidden when open --> <a href="#accordion4" id="open-accordion4" title="open">first accordion</a> <!-- link close accordion, hidden when closed --> <a href="#accordion" id="close-accordion4" title="close">first accordion</a> <!-- accorion content goes in div --> <div class="accordion-content"> <p>accordion 1 content</p> </div> </div> <!-- second accoridon option --> <div> <span class="target-fix" id="accordion5"></span> <a href="#accordion5" id="open-accordion5" title="open">second accordion</a> <a href="#accordion" id="close-accordion5" title="close">second accordion</a> <div class="accordion-content"> <p>accordion 2 content.</p> </div> </div> <!-- third accoridon option --> <div> <span class="target-fix" id="accordion6"></span> <a href="#accordion6" id="open-accordion6" title="open">third accordion</a> <a href="#accordion" id="close-accordion6" title="close">third accordion</a> <div class="accordion-content"> <p>accordion 3 content</p> </div> </div> </div> <div class="accordion red"> <!-- span target fix closing accordion --> <span class="target-fix" id="accordion"></span> <!-- first accoridon option --> <div> <!-- span target fix accordion --> <span class="target-fix" id="accordion7"></span> <!-- link open accordion, hidden when open --> <a href="#accordion7" id="open-accordion7" title="open">first accordion</a> <!-- link close accordion, hidden when closed --> <a href="#accordion" id="close-accordion7" title="close">first accordion</a> <!-- accorion content goes in div --> <div class="accordion-content"> <p>accordion 1 content</p> </div> </div> <!-- second accoridon option --> <div> <span class="target-fix" id="accordion8"></span> <a href="#accordion8" id="open-accordion8" title="open">second accordion</a> <a href="#accordion" id="close-accordion8" title="close">second accordion</a> <div class="accordion-content"> <p>accordion 2 content.</p> </div> </div> <!-- third accoridon option --> <div> <span class="target-fix" id="accordion9"></span> <a href="#accordion9" id="open-accordion9" title="open">third accordion</a> <a href="#accordion" id="close-accordion9" title="close">third accordion</a> <div class="accordion-content"> <p>accordion 3 content</p> </div> </div> </div> css
body { background: #734f79; font-family: 'flamenco', serif; } h3 { color: #fff; font-weight: normal; font-size: 2.5rem; text-align: center; } /*_________________ accordion ________________________________________ .accordion, .second-accordion { position: relative; margin: 60px auto; width: 80%; } [id*="open-accordion"], [id*="close-accordion"], [id*="open-second-accordion"], [id*="close-second-accordion"] { background: #00a486; border-bottom: 1px solid #fff; line-height: 40px; height: 40px; display: block; margin: 0 auto; position: relative; width: 99%; } [id*="close-accordion"], [id*="close-second-accordion"] { display: none; } .accordion a, .second-accordion { color: #fff; font-size: 1.25em; font-weight: normal; padding-left: 2%; text-decoration: none; text-shadow: none; } [id*="open-accordion"]:after, [id*="close-accordion"]:after, [id*="open-second-accordion"]:after, [id*="close-second-accordion"]:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(255, 255, 255, 0.6); position: absolute; right: 5px; top: 15px; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } .target-fix { display: block; top: 0; left: 0; position: fixed; } .accordion-content { background: #fff; height: 0; margin: -1px auto 0; padding: 0 2.5%; position: relative; overflow: hidden; width: 90%; transition: 0.1s ease; -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; } .accordion span:target ~ .accordion-content, .second-accordion span:target ~ .accordion-content { display: block; height: auto; padding-bottom: 25px; padding-top: 10px; } .accordion span:target ~ [id*="close-accordion"], .second-accordion span:target ~ [id*="close-second-accordion"] { display: block; } .accordion span:target ~ [id*="open-accordion"], .second-accordion span:target ~ [id*="open-second-accordion"] { display: none; } .accordion span:target ~ [id*="close-accordion"]:after, .second-accordion span:target ~ [id*="close-second-accordion"]:after { border-top: 10px solid #333; transform: rotate(0deg); -webkit-transform: rotate(0deg); } */ .accordion { position: relative; margin: 60px auto; width: 100%; } [id*="open-accordion"], [id*="close-accordion"] { background: #87d3b7; border-bottom: 1px solid #fff; line-height: 40px; height: 40px; display: block; margin: 0 auto; position: relative; width: 99%; } [id*="close-accordion"] { display: none; } .accordion { color: #fff; font-size: 1.25em; font-weight: normal; padding-left: 2%; text-decoration: none; text-shadow: none; } [id*="open-accordion"]:after, [id*="close-accordion"]:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(255, 255, 255, 0.6); position: absolute; right: 5px; top: 15px; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } .target-fix { display: block; top: 0; left: 0; position: fixed; } .accordion-content { background: #fff; height: 0; margin: -1px auto 0; padding: 0 2.5%; position: relative; overflow: hidden; width: 90%; transition: 0.1s ease; -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; } .accordion span:target ~ .accordion-content { display: block; height: auto; padding-bottom: 25px; padding-top: 10px; } .accordion span:target ~ [id*="close-accordion"] { display: block; } .accordion span:target ~ [id*="open-accordion"] { display: none; } .accordion span:target ~ [id*="close-accordion"]:after { border-top: 10px solid #ffffff; transform: rotate(0deg); -webkit-transform: rotate(0deg); } .accordion.blue [id*="open-accordion"],.accordion.blue [id*="close-accordion"] {background: #87c3d3;} .accordion.red [id*="open-accordion"],.accordion.red [id*="close-accordion"] {background: #d38791;}
the easiest way side-step using <a> altogether.
new window:
<!-- link open accordion, hidden when open --> <a href="#accordion1" id="open-accordion1" title="open">first accordion <span data-href="http://www.google.com.au" onclick="window.open(this.getattribute('data-href')); return false;">google</span></a> same window:
<!-- link open accordion, hidden when open --> <a href="#accordion1" id="open-accordion1" title="open">first accordion <span data-href="http://www.google.com.au" onclick="document.location.href = this.getattribute('data-href'); return false;">google</span></a> employing little javascript avoid disentangling existing functionality.
again, stated in comment:
while it's interesting see pure css accordion, wouldn't recommend using this. 2 anchors hide/show display 1 heading, that's poor html. find better 1 (which uses js.)
.. still don't recommend accordion.
Comments
Post a Comment