JQueryUI Accordion: Headers and an inline block for arranging image/text

问题

What I'm trying to do at the moment is figure out where the heck my accordion is pulling it's heading styles from.

This is what I had as default for the accordion headers:

<h3>Header for Accordion Slide Goes Here</h3>

However I couldn't find any reference to the h3 style.

When I wanted to create multiple accordions on one page with the settings that I wanted, I used:

$(function() {

        $("#accordion").accordion({ header: "h3", active: false, collapsible: true });

Again I used h3 here.

I tried adding this to the end of the styles section:

h3{ font-weight:bold; font-size:1.5em; }

But it didn't affect anything. (For some reason, the site I'm using this on has removed the styles completely from the html.)

What I want is to change the header to look more like the one in the bottom example, instead of the top:

i.e. it needs to be larger and much easier to read.

The other issue I'm having, is when the slide opens, I have an image in there with some text. Which needs to be displayed with the text aligned to the top right of the image, instead of the default, which starts it at the lower right.

Previously I had used the following to do this:

.accordion img{
    display:inline-block;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;
}
.accordion .taxt{
    display:inline-block;
    width:280px;
}

But this is where I'm not sure where to adapt the CSS (or if it's possible) so that I can apply the same to this new JQueryUI accordion.

Here's how it looks in the html currently:

<div id="accordion">
<h3>Tutor-led Learning</h3>
<div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180" /> <taxt>To view the tutor-led course information, please click <a href="LINK HERE">here</a></taxt></div>
<h3>E-Learning</h3>
<div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180" /> <taxt>To view the E-Learning course information, please click <a href="LINK HERE">here</a></taxt></div>
</div>

Edit: JSFiddle - http://jsfiddle.net/jz8Bz/

Strangely the headers in the fiddle look much better...

Hopefully that's all the info required, this ended up as a long post :)

Thanks in advance for any help,

Jon

Edit: Temporary work-around for the font size, I just used style="font-size:20px" in the header tags...not ideal but it works I guess? Still confused as to why the JSFiddle looks different from the site I'm using it on though.

回答1:

You needed a few changes.

I added ul and li tags with class names for the css. Here's the HTML:

<div>
  <ul class="foobar">
    <li class="foo">
      <img src="http://i.imgur.com/u6aq5MW.jpg" height="125" width="180" />
    </li>
    <li class="bar">To view the E-Learning course information, please click 
      <a href="Link">here</a>
    </li>
  </ul>
</div>

For the css:

#accordion .foobar { 
  margin:0px;
  padding:0px;
}

#accordion .foobar .foo {
  display:inline-block;
  width:180px;
  height:125px;
  vertical-align:top;
  margin-right:10px;
}

#accordion .foobar .bar {
  display:inline-block;
  width:280px;         /* enlarge this value, if you want text all on one line */
}

Here is a fiddle: http://jsfiddle.net/PvvAc/

As to why your headers are messed up on your page and not the jsfiddle, you must have some css rules on your page that aren't playing nicely.

来源：https://stackoverflow.com/questions/17851162/jqueryui-accordion-headers-and-an-inline-block-for-arranging-image-text

标签

jquery

css

jquery-ui

accordion