Div toggle с javascript проблем

tyrla4eto

Registered
Здравейте,
имам няколко див тага и като ги кликна искам да се показва или скрива информацията вътре. До момента съм го направил по някакъв супер глупав начин (поне така си мисля де), но проблема е там, че информацията, която искам да се показва вътре се извлича, чрез заявка от базата данни. Ако напиша текст няма проблем, всичко работи нормално, но ако направя заявката, тя остава постоянно показана, не се скрива при кликане. Какъв и къде може да е проблема и има ли някакъв по-лесен начин да го направя?

Ето кода, който сглобих до момента:

Код:
<div id="tab1">
		<a href="#">Див таб 1</a>
		<p id="text1">Заявката</p>
	</div>
	<div id="tab2">
		<a href="#">Див таб 2</a>
		<p id="text2">Заявка</p>
	</div>
	<div id="tab3">
		<a href="#">Див таб 3</a>
		<p id="text3">Заявка</p>
	</div>
	<div id="tab4">
		<a href="#">Див таб 4</a>
		<p id="text4">Заявка</p>
	</div>
	<div id="tab5">
		<a href="#">Див таб 5</a>
		<p id="text5">Заявка</p>
	</div>
	<div id="tab6">
		<a href="#">Див таб 6</a>
		<p id="text6">Заявка</p>
	</div>
	<div id="tab7">
		<a href="#">Див таб 7</a>
		<p id="text7">Заявка</p>
	</div>
<script>
$("p").hide();
$(document).ready(function(){
    $("#tab1").click(function(){
        $("#text1").toggle();
    });
	$("#tab2").click(function(){
        $("#text2").toggle();
    });
	$("#tab3").click(function(){
        $("#text3").toggle();
    });
	$("#tab4").click(function(){
        $("#text4").toggle();
    });
	$("#tab5").click(function(){
        $("#text5").toggle();
    });
	$("#tab6").click(function(){
        $("#text6").toggle();
    });
	$("#tab7").click(function(){
        $("#text7").toggle();
    });
});

</script>
 
Сложи такъв текст в p-таговете, че да се прецака, и ще видим как може да се оправи:
https://jsfiddle.net/rx5emnrd/

Нали ползваш ajax?
Доколкото виждам отстрани (в jsfiddle.net) ще си пращаш заявките до /echo/json;можеш някъде по пътя да подмениш празния стринг, който ще дойде от /echo/json с текста, който бъгва скриването.
 
Пробвах го варянта и проблемът идва от тази таблица, която искам да сложа:

Код:
		<table cellspacing="0" style="margin-left: 5px; margin-top: 15px;width: 100%;">
			<tr>
				<td style="width: 150px; padding-bottom: 3px; border-bottom: 1px solid gray; text-align: center;">
					<img src="Някакъва снимка" width="170px" height="150px"/><br/>
				</td>
				<td style="padding-bottom: 3px; border-bottom: 1px solid gray;" valign="top">
					<h3 style="text-align: left; border-bottom: 1px solid green; padding-top: 3px; font-weight: bolder; margin-bottom: 5px;">Някакъв текст</h3>
						<div style="text-align: left; font-size: 11px;">
							<b>Някакъв текст</b> <span style="font-weight: bolder; background-color: red; color: white; padding: 2px;">Някакъв текст</span><br/>
							<b>Някакъв текст</b> <span style="font-weight: bolder; background-color: red; color: white; padding: 2px;">Някакъв текст</span><br/>
						</div>
				</td>
			</tr>
		</table>

Всъщност без значение каква е, поставя ли таблица и кода почва да се бъгва...
 
tyrla4eto каза:
Пробвах го варянта и проблемът идва от тази таблица, която искам да сложа:

Код:
		<table cellspacing="0" style="margin-left: 5px; margin-top: 15px;width: 100%;">
			<tr>
				<td style="width: 150px; padding-bottom: 3px; border-bottom: 1px solid gray; text-align: center;">
					<img src="Някакъва снимка" width="170px" height="150px"/><br/>
				</td>
				<td style="padding-bottom: 3px; border-bottom: 1px solid gray;" valign="top">
					<h3 style="text-align: left; border-bottom: 1px solid green; padding-top: 3px; font-weight: bolder; margin-bottom: 5px;">Някакъв текст</h3>
						<div style="text-align: left; font-size: 11px;">
							<b>Някакъв текст</b> <span style="font-weight: bolder; background-color: red; color: white; padding: 2px;">Някакъв текст</span><br/>
							<b>Някакъв текст</b> <span style="font-weight: bolder; background-color: red; color: white; padding: 2px;">Някакъв текст</span><br/>
						</div>
				</td>
			</tr>
		</table>

Всъщност без значение каква е, поставя ли таблица и кода почва да се бъгва...

https://jsfiddle.net/0b50w8z0/
 
Вместо да слагаш id на всеки елемент и след това да пишеш повтарящ се код за него, може да използваш class.
https://jsfiddle.net/kme87wfL/
 

Горе