Viewing Accordion in Open State

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Accordion in Open State



User: Les C. 10 years ago
I want to have this accordion display with the first section open. Nothing is working.

Suggestions?

<html>
<body>
<div class="verticalaccordion">
<ul>
<li>
<h9>SECTION 1</h9>
<div>12345</div>
</li>
<li>
<h9>SECTION 2</h9>
<div>6789</div>
</li>
</ul>
</div>
</body>

</html>


<style>

.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style: none;
width: 845px;
}

.verticalaccordion>ul>li {
display: block;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
height: 46px;
width: 845px;
/* Decorative CSS */

background-color: #;
/* CSS3 Transition Effect */

transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalaccordion>ul>li>h9 {
display: block;
margin: 0;
padding: 10px 645px 10px 0px;
height: 25px;
text-align: right;
/* Decorative CSS */

border-top: # 1px solid;
font-family: HelveticaNeue, sans-serif;
font-weight:lighter;
font-size: 19px;
text-decoration: none;
text-transform: ;
color: #000000;
background: #;
/* CSS3 Gradient Effect */

background: -moz-linear-gradient( top, #, #);
background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#);
/* IE 7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#)";
/* IE 8 */
}

h6 {
line-height: 6px;
}

.verticalaccordion>ul>li>div {
margin: 0px 0px 0px 0px;
overflow: auto;
padding:0px 0px 0px 208px;
height: 520px;
font-family: HelveticaNeue, sans-serif;
font-size: 19px;
color: #333333;
}

.verticalaccordion>ul>li:hover {
height: 380px;
}

.verticalaccordion:hover>ul>li:hover>h9 {
/* Decorative CSS */

color: #;
background: #;
/* CSS3 Gradient Effect */

background: -moz-linear-gradient( top, #, #);
/* FF, Flock */

background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
/* Safari, Chrome */

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#);
/* IE 5.5 - IE 7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#)";
/* IE 8 */
}

.verticalaccordion>ul>li>h9:hover {
cursor: pointer;
}

z-index:11;

<style/>

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(function(){
$('#verticalaccordion').verticalaccordion({active: 0 });
});
</script>

Last edit 10 years ago
User: Les C. 10 years ago
Here is a jsfiddle:

http://jsfiddle.net/LCfiddle/9ayhywut/2/
User: Les C. 10 years ago
Here is an example of an accordion panel being open on load. I just can't deconstruct it:

http://codepen.io/uniqname/pen/gKmpz

Can anyone provide any insight?


L C
User: Roddy 10 years ago
The open section of the accordion is given an extra class - "accordion-item--default" . Notice how I have removed it from the third <section> element and added it to the first one.

<div class="accordion">
<section class="accordion-item accordion-item--default">
<h1>Section 1</h1>
<div class="accordion-item-content">
<p>Content for section 1</p>
</div>
</section>
<section class="accordion-item">
<h1>Section 2</h1>
<div class="accordion-item-content">
<p>Content for section 2</p>
</div>
</section>
<section class="accordion-item">
<h1>Section 3</h1>
<div class="accordion-item-content">
<p>Content for section 3</p>
<p>This is my default state.</p>
</div>
</section>
<section class="accordion-item">
<h1>Section 4</h1>
<div class="accordion-item-content">
<p>Content for section 4</p>
</div>
</section>
</div>

ALso, you would be better to give the accordion a fixed width rather than a percentage....

.accordion {
padding: 0;
margin: 0 auto;
width: 20%; /* change this to a fixed number of pixels */
font-family: "PT Sans" sans-serif
}

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 10 years ago
--Roddy

THANK YOU!

Here's the code:

<div class="accordion">
<section class="accordion-item accordion-item--default">
<h1>TITLE1</h1>
<div class="accordion-item-content">
<p>0
<br />
<br /> 1
<br />
<br /> 2
<br />
<br /> 3
<br />
<br /> 4
<br />
<br /> 5
<br />
<br /> 6</p>
</div>
</section>
<section class="accordion-item">
<br />
<h1>TITLE2</h1>
<div class="accordion-item-content">
<p>a1
<br /> a2
<br />
<br /> b1
<br /> b2
<br />
<br /> c1
<br />c3</p>
</div>
</section>
</div>

<style>

.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
height: 340px;
}

.accordion-item-content,
.accordion:hover .accordion-item-content {
height: 0;
overflow: hidden;
transition: height .25s;
}

.accordion {
padding: 0;
margin: 0;
width: 845px;
font-family: HelveticaNeue, sans-serif;
font-weight: lighter;
font-size: 19px;
}

.accordion .accordion-item-content {
padding: 0px 0px 0px 208px;
font-size: 19px;
color: #333333;
}

.accordion h1 {
display: block;
margin: 0;
padding:0px 645px 0px 0px;
text-align: right;
font-size: 19px;
color: #000000;
font-family: HelveticaNeue, sans-serif;
font-weight: lighter;
}

.accordion .accordion-item:nth-child(1) {}

.accordion .accordion-item:nth-child(2) {}

</style>


Post Reply
You must login or signup to post.