Javascript появляются/исчезают объекты

Question

Я сейчас работаю над проектом. Когда вы нажимаете на один элемент, появляется информация ниже, я хотел знать, как заставить ее исчезнуть, когда вы нажимаете на следующий элемент, не откладывая один и тот же элемент ... Например, у меня есть пицца в моем проекте, я хочу щелкнуть мясо пиццу, чтобы увидеть начинки, затем нажмите на сырную пиццу, чтобы увидеть начинки, а мясные начинки исчезнут.

Вот мой Html код ....

<table align="center"> 
<tr> 
<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px;width:200px; height:150px"> 
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a> 

</fieldset></td> 

<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px; width:200px; height:150px"> 
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese"> 
Cheese Pizza</a> 

</fieldset></td> 

<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px; width:200px; height:150px;"> 
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie"> 
Veggie Pizza</a> 

</fieldset></td> 
</tr> 
</table> 

<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center"> 
<a name="Meat"> 
<table> 
<tr><td width="220">Meat Toppings</td></tr> 

</table> 

</a> 
</div> 

<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center"> 
<a name="Cheese"> 
<table> 
<tr><td width="220">Cheese Toppings</td></tr> 

</table> 
</a> 
</div> 

<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center"> 
<a name="Veggie"> 
<table> 
<tr><td width="220">Veggie Toppings</td></tr> 
</table> 
</a> 
</div> 

Вот мой Javascript ......

function ShowHide(divId) 
{ 
if(document.getElementById(divId).style.display == 'none') 
{ 
document.getElementById(divId).style.display='block'; 
} 
else 
{ 
document.getElementById(divId).style.display = 'none'; 
} 
} 


function showApp(a) { 
var aside = document.getElementById('aside'); 
var arr = aside.getElementsByTagName('span'); 
for (i = 0; i < arr.length; i++) { 
    if (arr[i].getAttribute('id') != a) { 
     arr[i].style.visibility = 'hidden'; 
    } 
} 
x = document.getElementById(a); 
var state; 
if (x.style.visibility == 'visible') { 
    state = 'hidden'; 
} 
else { 
    state = 'visible'; 
} 
x.style.visibility = state; 
} 

Answer 1

Добавить forShowHide() петлю функции, как это:

ОБНОВЛЕНО

ShowHide = function(divId) 
{ 
    if(document.getElementById(divId).style.display == 'none') 
    { 
     var alltexts = document.getElementsByClassName('mid'); 
     for(var i=0;i<alltexts.length;i++) 
      alltexts[i].style.display = 'none'; 
     document.getElementById(divId).style.display='block'; 
    } 
    else 
    { 
     document.getElementById(divId).style.display = 'none'; 
    } 
} 

В ShowHide мы должны скрыть все тексты, прежде чем показывать текст с нажатым предметом.

Найти рабочий стол HERE.

Answer 2

Некоторые решения, например:

1. Вы можете создать глобальный элемент JS, который будет содержать текущий показал элемент и обновлять его каждый щелчок.

2. Вы можете при каждом нажатии сначала скрыть все элементы, а затем показать требуемый элемент.