Accordion in Open State

Discussion in 'Web Design' started by L C, Dec 10, 2015.

to remove all ads.
  1. L C

    L C New Member

    Messages:
    11
    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>
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    One can only say that you have not tried everything then.

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

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

    L C New Member

    Messages:
    11
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    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.
     
  5. L C

    L C New Member

    Messages:
    11
    --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
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
  7. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  8. L C

    L C New Member

    Messages:
    11
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    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
     
  10. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
  11. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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?
     
  12. L C

    L C New Member

    Messages:
    11
    --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: Dec 12, 2015
  13. L C

    L C New Member

    Messages:
    11
    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>
     
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  15. L C

    L C New Member

    Messages:
    11
    -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
     
  16. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    no probs. glad you got it resolved

    :)
     

Share This Page