jQuery效果：我哪里出错了？

Question

I've scoured the internet for solutions, but I have gotten utterly stuck. Basically, I'm wanting three buttons equally sized and horizontal that reveal and hide three different content sections.

I had the buttons, by using a span + h3 styled with CSS, displayed in a horizontal row using inline-block; but, then the CSS broke when i added the accordion function and also the accordion makes it a vertical stack anyway.

1) Am I right in thinking it should've been a blind effect rather than accordion? Can anyone show me how to get it to work as I'm wanting?

2) Why is my CSS broken even after I took the accordion back out? I'm assuming I've cut something out or added something whilst trying to get it right and that has caused it to stop?

3) I also had the accordion functioning so that it automatically closed any open content on the next click. I'm assuming I've broken this whilst messing about too - but again I can't see what I'm doing wrong.

HTML

title 1

    <section>
        <p>one</p>
     </section>
     <h5>Or</h5>
 <span class="button"><h3>title 2</h3></span>

 <section>
    <p>two</p>
 </section>
     <h5>Or</h5>
  <span class="button"><h3>title 3</h3></span>

<section>
      <p>three</p>
 </section>
 </div>

CSS

div#container span.block {
    display: inline-block;
    width:29%;
    background-color:red;
}
div#container span.block h3 {
    text-align: center;
}
div#container section {
    width: 100%;
}

JS

(function ($) {
    /* Initially hide all 'section' content */
    var allPanels = $('#container > section').hide();

    /* on block-btn/ h3 click - use slide toggle effect to hide/ show content */
    $('#container > span.button > h3').click(function () {
        $(this).parent().next().slideToggle()
            .siblings('.hide').slideUp();
         return false;
    });
    $('.close').click(function () {
        $('#container .hide').slideUp();
    });
 })(jQuery);

My Accordion problem - http://jsfiddle.net/SparrowWoods/2fsagge1/

Answer 1

You're content using jquery uis readymade accordion: DEMO

<div id="accordion"> 
    <h3>title 1</h3>

    <section>
        <p>one</p>
    </section>

 <h3>title 2</h3>

    <section>
        <p>two</p>
    </section>

    <h3>title 3</h3>

    <section>
        <p>three</p>
    </section>
</div>

$(function() {
$( "#accordion" ).accordion();
});

Answer 2

You could make your own Accordion based on THIS by trying something to the tune of this:

(function ($) {
    /* Initially hide all 'section' content */
    /*var allPanels = $('#container > section').hide();

     on block-btn/ h3 click - use slide toggle effect to hide/ show content */
    /*$('#container > span.button > h3').click(function () {
        $(this).parent().next().slideToggle()
            .siblings('.hide').slideUp();
        return false;
    });
    $('.close').click(function () {
        $('#container .hide').slideUp();
    });*/

    $(".button").click(function(){
          $('.subDiv').slideUp("slow");
          $(this).next('.subDiv').slideDown("slow");
        });
})(jQuery);

Here, you can just leverage JQuery's slideUp and slideDown functions along with nested <ul> and <li> or <div> tags in conjunction with JQuery UI Library.

HTML:

<div id="container"> <span class="button"><h3>title 1</h3></span>
<div class="subDiv">
    <section>
        <p>one</p>
    </section>
    </div>
     <h5>Or</h5>
 <div class="button"><h3>title 2</h3></div>
<div class="subDiv">
    <section>
        <p>two</p>
    </section>
    </div>
     <h5>Or</h5>
 <div class="button"><h3>title 3</h3></div>
<div class="subDiv">
    <section>
        <p>three</p>
    </section>
    </div>
</div>

Try it in your Fiddle implementation.