Accordion in Open State

L C · Dec 10, 2015

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

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

XImageTransform.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 · Dec 10, 2015

L C said:
Nothing is working.

One can only say that you have not tried everything then.

AND neither can we, unless you show ALL the rendered code

L C said:
Suggestions?

Mine is provide a URI so we can see what you are talking about.

L C · Dec 10, 2015

--Chrishirst

Here you go:

http://jsfiddle.net/LCfiddle/9ayhywut/2/

Thanks,

L C

chrishirst · Dec 10, 2015

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.

L C · Dec 10, 2015

--Chrishirt

Needed to use the accordion because there is a lot of text that is needed for only selected viewers.

I updated the jsfiddle, but still nothing:

http://jsfiddle.net/LCfiddle/9ayhywut/7/

L C

Phreaddee · Dec 11, 2015

Phreaddee · Dec 11, 2015

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.

L C · Dec 11, 2015

--Phreaddee

Thanks for the feedback.

I updated the jsfiddle. Still not working.

Take a look:

http://jsfiddle.net/LCfiddle/9ayhywut/9/

What am I missing here?

L C

chrishirst · Dec 11, 2015

Phreaddee said:
h9?

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 · Dec 11, 2015

http://jsfiddle.net/c801xjx0/1/

your css needs revision.

Phreaddee · Dec 11, 2015

chrishirst said:
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 · Dec 12, 2015

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

L C · Dec 14, 2015

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 · Dec 15, 2015

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 · Dec 15, 2015

-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

Phreaddee · Dec 15, 2015

no probs. glad you got it resolved

Accordion in Open State

L C

New Member

chrishirst

Well-Known Member

L C

New Member

chrishirst

Well-Known Member

L C

New Member

Phreaddee

Super Moderator

Phreaddee

Super Moderator

L C

New Member

chrishirst

Well-Known Member

Phreaddee

Super Moderator

Phreaddee

Super Moderator

L C

New Member

L C

New Member

Phreaddee

Super Moderator

L C

New Member

Phreaddee

Super Moderator