Как мне запустить Аккордеонные Элементы на Inline?

Question

Как мне запустить Аккордеонные Элементы на Inline?

0

Я строю простую домашнюю домашнюю страницу для моей школы. Я хотел бы сделать это простым и чистым, поэтому я использую jQuery аккордеонные коробки, чтобы содержать ссылки. У меня есть элементы аккордеона, работающие нормально, но они не размещены должным образом. Я хочу, чтобы поля "Teacher Links" и "Library Info" были помещены в одну строку, но я не могу заставить его работать. Я не могу запустить их с "абсолютным" позиционированием, поскольку это не позволяет им распространять веб-страницу при их открытии.

Кто-нибудь знает, как это исправить?

<body style="background-color: #D9F3FD">
<div id="bodyWrapper">
<p class="style1"><span class="style4" id="PHHS">PHHS</span> Home Screen</p>
    <div class="accordionWrapper">
        <div id="accordionStudents">
            <h1>Student Links</h1>
                <div>
                    <table border-color="white" id="table1">
                        <tr id="table1Row1">
                            <td class="table1Row1Data1">Bell Schedule</td>
                            <td class="tableRow1Data1">TeacherEase</td>
                            <td class="tableRow1Data1">Powerschool</td>
                            <td class="tableRow1Data1">Library Information</td>
                        <tr>
                        <tr>
                    <tr>
                        <td>Link</td>
                        <td>Link</td>
                        <td>Link</td>
                        <td>Link</td>
                    </tr>
                </table>
            </div>
    </div>
</div>
<br>
<br>
<br>
<div class="accordionWrapper">
    <div id="accordionTeachers">
        <h1>Teacher Links</h1>
            <div>
                <p>Test Teacher Text</p>
            </div>
    </div>
    </div>
 <div class="accordionWrapper">
   <div id="accordionLibrary">
        <h1>PHHS Library Information</h1>
            <div>
                <p>Text Library Text</p>
            </div>
    </div>
        </div>
<br>
<br>
<br>
    </div>

JSfiddle

user3103701 15 дек. 2013, в 06:57

Источник

Теги:

jquery

html

jsfiddle

accordion

1 ответ

Ещё вопросы

BenMann · Accepted Answer · 2013-12-15T08-13-00.000Z

Поэтому для решения первой проблемы с ящиками, находящимися "на одной строке", вы можете просто поплавать такими элементами:

#accordionTeachers{
  width: 50%;
  float: left;
}

#accordionLibrary{
  width: 50%;
  float: left;
}

Вам также не нужен .accordionWrapper вокруг них в вашем html. Теперь для второго пункта

препятствует расширению веб-страницы

Я не уверен, правильно ли я вас понимаю. Однако, если вы хотите, чтобы открытый аккордеон расширял цветной div (# D9F3FD), вам нужно будет отрегулировать высоту, возможно, до height: auto;

В общем, вы не должны использовать " <br> or <br/> или "пустые" таблицы, чтобы создать пустое пространство между вашими элементами. Используйте margin-top and margin-bottom для их вертикального перемещения.

Это решило обе мои проблемы, включая проблему, касающуюся расширения веб-страницы. Чтобы уточнить, моя проблема заключалась в том, что аккордеон должен был увеличить длину фона, чтобы раскрывающееся меню не переполняло контейнер, создавая видимость окна, как если бы оно имело большое значение z-index (следовательно, перекрывая другие элементы ). Я удалил теги <br> и использовал инструменты для полей, как вы и предлагали, и теперь я получаю из этого улучшенную функциональность. У меня недостаточно репутации, чтобы голосовать, но если бы я это сделал, я бы, конечно, так и сделал. Еще раз спасибо!
Пожалуйста, рад, что это помогло:]