Как показать и скрыть div, используя две разные ссылки

Question

У меня есть страница HTML, где у меня есть ссылка как «SHOW», при нажатии на нее мне нужно показать область div. где DIV имеет iframe.

Обычно при загрузке HTML-страницы, которая должна находиться в скрытом состоянии, при нажатии только она должна отображаться.

Мне нужна кнопка закрытия внутри этой ссылки..Но нажав на нее, мне нужно закрыть погружение, которое скрыто.

<a href="#" onClick="toggleDisplay('toHide')">a</a> 
function toggleDisplay(id) 
    { 
     if (!document.getElementById) { return; } 
     var el = document.getElementById('straddle'); 
     if (el.style.display == ''){ 
      el.style.display = 'none'; 
     }else { 
      el.style.display = ''; 
     } 
    } 

Я не хочу эту функция переключения

Пожалуйста, помогите мне.

Answer 1

Ваш Javascript

<script type="text/javascript"> 
<!-- 
    var whatever = document.getElementById('mydiv'); 
    whatever.style.display = 'none'; 

    function show(){ 
      whatever.style.display = 'block'; 
    } 

    function hide(){ 
      whatever.style.display = 'none'; 
     } 
//--> 
</script> 

, а затем HTML

<a href="#" onclick="show();">Click here to show element </a> 
<br/> 
<div id="mydiv"> 
This will disappear and reappear and 
<a href="#" onclick="hide();">Click here remove element</a></div>` 

Answer 2

Использование JQuery:

$(document).ready(function() { 
    $('#link1').click(function() { $('#div').css({ display:'none' }) }) 
    $('#link2').click(function() { $('#div').css({ display:'block' }) }) 
}) 

Answer 3

Вы можете this (Iframe может занять некоторое время для загрузки, так что пусть это нагрузки)

HTML:

<a href="#" id="show">Show</a> 
<div id="straddle"> 
    <div id="close">Close</div> 
    <iframe width='100%' src="http://heera.it"></iframe> 
</div> 

JS: (Put его перед closong </body> тег между <scripe type="text/javascript"></scripe>)

window.onload = function() { 
    var show = document.getElementById('show'), 
     el = document.getElementById('straddle'), 
     close = document.getElementById('close'); 
    show.onclick = function() { 
     el.style.display = 'block'; 
     return false; 
    }; 
    close.onclick = function(){ 
     el.style.display = 'none'; 
    }; 
}; 

Update: Добавлена ​​соответствующая css

#straddle{ display:none; } 
#close{ 
    float:right; 
    cursor:pointer; 
    display:inline-block; 
}