Javascript 分区'；共享公共垂直/水平区域

“在表中显示数据”每当单击时都会移动其空间。有办法避免吗？ 基本上，我希望“dropdown”右侧的内容折叠起来，并且每当单击“ShowDatainTable”链接时，表中的内容就会展开

<div class="cont">
    <select class="pull-left">
        <option>123456789 1234 123</option>
        <option>456</option>
    </select>
    <div class="pull-left in-block">
        <div class="side-header">
            <div>abc</div>
            <div>def</div>
         </div>
        <div class="side-content1">
            <div>ghi</div>
            <div>jkl</div>
            <div>mno</div>
        </div>
    </div>
    <div class="clear details1 adjust-pos">
        <span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
    <div class="details1-content hide">
        <table>
             <thead>
                <tr>
                   <th>Heading 1</th>
                   <th>Heading 2 </th>
                   <th>Heading 3</th>
                </tr>
             </thead>
                <tbody>
                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>

                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>
          </tbody></table>
    </div>
    </div>

</div>

<div class="cont clear">
    <select class="pull-left">
        <option>123456789 1234 123</option>
        <option>456</option>
    </select>
    <div class="pull-left in-block">
        <div class="side-header">
            <div>abc</div>
            <div>def</div>
         </div>
        <div class="side-content2">
            <div>ghi</div>
            <div>jkl</div>
            <div>mno</div>
        </div>
    </div>
    <div class="clear details2 adjust-pos">
        <span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
    <div class="details2-content hide">
        <table>
             <thead>
                <tr>
                   <th>Heading 1</th>
                   <th>Heading 2 </th>
                   <th>Heading 3</th>
                </tr>
             </thead>
                <tbody>
                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>

                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>
          </tbody></table>
    </div>
    </div>

</div>

123456789 1234 123
456
abc
def
ghi
jkl
mno
在表中显示数据
标题1
标题2
标题3
文本1
接着是一篇大文章
文本3
文本1
接着是一篇大文章
文本3
123456789 1234 123
456
abc
def
ghi
jkl
mno
在表中显示数据
标题1
标题2
标题3
文本1
接着是一篇大文章
文本3
文本1
接着是一篇大文章
文本3

您能更详细地描述一下您的问题吗？所有这些html是否都与解决此问题有关？目前很难判断您对这个问题的要求。“在表中显示数据”会在每次单击时移动位置，因为位置发生了变化。是否有办法避免？