Jump to content
php.lv forumi

show/hide


eT`

Recommended Posts

Uztaisīju it kā elementāru show/hide skriptu, bet man atverot to show tas contents uzlien virsū nākamajam DIV

 

JS kods

function showHide(shID) {
  if (document.getElementById(shID)) {
     if (document.getElementById(shID+'-show').style.display != 'none') {
        document.getElementById(shID+'-show').style.display = 'none';
        document.getElementById(shID).style.display = 'block';
     }
     else {
        document.getElementById(shID+'-show').style.display = 'inline';
        document.getElementById(shID).style.display = 'none';
     }
  }
}

 

HTML daļa

<div class="monitors" align="center">
<div class="mon_header">AAA</div>
AAA
<br />
   <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Rādīt</a>
   <div id="example" class="more">
   <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Paslēpt</a><br />
   <p>XXX</p>
   </div>
</div>

<div class="monitors" align="center">
<div class="mon_header">AAA</div>
AAA
<br />
   <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Rādīt</a>
   <div id="example" class="more">
   <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Paslēpt</a><br />
   <p>XXX</p>
   </div>
</div>

 

CSS daļa

.more {
width:100%;
display: none;
float:right;
}

.more p {
margin-right:-120px;
}

a.showLink, a.hideLink {
padding-left:10px;
text-decoration: none;
float:right;
margin-right:5px;
margin-bottom:10px;
background: transparent url('images/show.png') no-repeat left; 
}

a.hideLink {
padding-left:10px;
text-decoration: none;
float:right;
margin-right:5px;
background: transparent url('images/hide.png') no-repeat left; 
}

.mon_header {
background-color: #fcfcfc;
height:20px;
margin-top:20px;
margin-bottom:20px;
color:#838382;
text-align:center;
}

.monitors {
margin-top:10px;
margin-bottom:10px;
display:block;
}

Link to comment
Share on other sites

nomainīju

 

<div class="monitors" align="center">
<div class="mon_header">XXX</div>
AAA
<br />
   <a href="#" id="1-show" class="showLink" onclick="showHide('1');return false;">Spēlētāji</a>
   <div id="1" class="more">
   <a href="#" id="1-hide" class="hideLink" onclick="showHide('1');return false;">Paslēpt</a><br />
   <p><small>AAA</small></p>
   </div>
</div>

<div class="monitors" align="center">
<div class="mon_header">XXX</div>
AAA
<br />
   <a href="#" id="2-show" class="showLink" onclick="showHide('2');return false;">Spēlētāji</a>
   <div id="2" class="more">
   <a href="#" id="2-hide" class="hideLink" onclick="showHide('2');return false;">Paslēpt</a><br />
   <p><small>AAA</small></p>
   </div>
</div>

 

bet tik un tā iet virsū.

man likās, ka CSS kaut kas nav pareizi, bet kas nezinu.

Edited by eT`
Link to comment
Share on other sites

vispār jau tas fix jāliek uz paša elementa, kuram ir float.

Ja liek papildus <div class="floatfix"> </div>, tad jāizmanto

.floatfix { 
 clear:both;
 overflow:hidden;
 height:0;
 visibility:hidden;
}

 

 

<div konteineris>

<div floato></div>

<div floato></div>

<div floato></div>

<div class="fix"></div>

</div>

 

Daru šitā, nekādus nbsp; nelieku, viss strādā...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...