Accordion in Open State

L C

New Member
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>
$(function(){
$('#verticalaccordion').verticalaccordion({active: 0 });
});
</script>
 

chrishirst

Well-Known Member
Staff member
Oh dear deity! I hate those bloody useless things.

They may be all right if you are just learning javascript etc. but believe you me when you get more experienced, they just get in the way.


However; You give the top level element of the one you want 'open' the same properties as it would have when :hover is applied either server side or with javascript, you will have to give it a class name or an id to use js of course.
 

Phreaddee

Super Moderator
Staff member
HTML
Code:
<div class="title">First Title</div>
    <p class="content open">First paragraph. (initially visible)</p>
<div class="title">Second Title</div>
    <p class="content">Second paragraph. (initially hidden)</p>

JS
Code:
$(".title").click(function() {
    $(this).next().toggle();
});

CSS
Code:
.content {display:none;}
.content.open {display:block;}
.title {cursor:pointer;}

I've used .click because IMHO thats better than hover. but you could certainly change it to hover if you must.
 

chrishirst

Well-Known Member
Staff member

It's one of the 'stranger' HTML5 'things', if six heading levels are not enough for you, you can define your own, though most browsers are going to treat them as just another element or ignore them completely.
So it is NOT something that anyone should choose to employ unless you are simply demonstrating a concept
 

Phreaddee

Super Moderator
Staff member
It's one of the 'stranger' HTML5 'things', if six heading levels are not enough for you, you can define your own, though most browsers are going to treat them as just another element or ignore them completely.
So it is NOT something that anyone should choose to employ unless you are simply demonstrating a concept

yeah, I must say I barely ever even make it to h6, so I'm at a loss as to why a design would ever NEED any more than that?
 

L C

New Member
--Phreaddee

Thanks for your candor and assistance.

I created a new jsfiddle based on your comments.

Here it is:
http://jsfiddle.net/LCfiddle/c801xjx0/4/

A current list of the issues with this variation includes:

1. Title element is changing position with the resizing of a page.
2. Windows are no longer gradually sliding open/close.
3. I can no longer hover over the Content area of the accordion and have the element open—only over the Title element.
4. When I highlight Title 2, Title 1 doesn't close.
5. The Title elements will not right justify.
6. The Title elements break into two lines.
7. There is a 10px padding I can't get to display at the end of context 1

There may be other issues, but it's hard to determine given the current status the code.


L C
 
Last edited:

L C

New Member
Here's the final:

<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>
 

Phreaddee

Super Moderator
Staff member
I don't quite understand why the padding-right on the h1 is so large.

does your final work? do you still need help?

I got bored on the weekend so put this little guy together.
http://www.nxc.com.au/examples/accordian

now again I haven't used hover I've used click. I don't event want to get into the UX disaster that is hover. I'll let you figure that out in your own time.
Also I haven't auto closed the sections when another is open, again I feel that is a UX choice that I'm not going to make. To do so would be a simple line of JS though if you so desired.
 

L C

New Member
-Phreaddee

The code now works. Thanks for your help along the way.

The padding was to fit a within another element set.

Nice accordion on your end :)


L C
 
Top