Home/ Questions/Q 920371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T18:42:07+00:00

I have a div box and a link on my page. I have written

  • 0

I have a div box and a link on my page. I have written simple javascript that hides the div box at the beginning, then after clicking the link, the box appears again.

The problem is, when the div appears, it pushes down contents bellow it. I would like it to just appear “above” them. Like a drop down menu but this is just a single div tag.

Here is my markup:

  <div class="slide-heading">
<div class="slide-laws">
 <a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>
                <!-- THE LINK TOGGLES THE DIV BELLOW -->
 <div>
  <a href="/clientarea/utils/law/id/2832" rel="external-new-window" style="color: #ba8800;"><strong>124/2006 - O bezpečnosti a ochrane zdravia pri práci a o zmene a doplnení niektorých zákonov</strong></a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/1" rel="external-new-window">§2, odsek 1</a><br />
  <a href="/clientarea/utils/law/id/2832/p/2/a/2" rel="external-new-window">§2, odsek 2</a><br />

  <a href="/clientarea/utils/law/id/2832/p/5/a/2" rel="external-new-window">§5, odsek 2</a><br />
 </div>
</div>
<h3>Kapitola 1</h3>
<p>Slide A</p>
<div class="clear">&nbsp;</div>
  </div>
            <p>I DON'T WANT THIS PARAGRAPH TO BE PUSHED DOWN WHEN THE BOX APPEARS.</p>

This link toggles the div bellow it:

<a href="#" class="toggle-slide-laws accessible-link"><img src="/images/paragraph.jpg" alt="paragraph"></a>

When you click on the link, the box appears or disappears.

My current styles:

#content div.slide-laws {
 float: right;
 width: 30em;
 line-height: 1.3em;
 font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
 float: right;
}
#content div.slide-laws div {
 text-align: left;
 float: left;
 margin-bottom: 4px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK I solved this by myself. These styles work (tested in FF and IE):

    #content div.slide-laws {
    float: right;
    width: 30em;
    line-height: 1.3em;
    font-size: .9em;
}
#content div.slide-laws a.toggle-slide-laws {
    float: right;
}
#content div.slide-laws div {
    text-align: left;
    float: left;
    z-index: 99999;
    position: absolute;
    top: 4em;
    right: 0;
    background: #eee;
    border: 1px solid #ccc;
    padding: 1em;
}
    • 0