ساخت div به این شکل

[beh9am 96]

سلام

میخواستم در سایتم یک div بسازم که با کلیک روش باز و بسته بشه به این شکل

این تصویر رو بینید :

وقتی بر روی نمایش کلیک میکنی به این شکل باز میشه:

و وقتی دوباره بر روی بستن کلیک میکنی بسته میشه و مثل حال اول میشه

دموی آنلاین : forum.persiantools.com/find-new/posts

تشکر

ویرایش شده آذر 93 توسط beh9am

[amirali123 38]

از افزونه زیر استفاده کنید:

https://wordpress.org/plugins/visual-form-builder/

البته با این افزونه میتونید ی یک پیج یا پست استفاده کنید.شاید بتونید شورت کدی ازش پیدا کنید

[A-fshin 1936]

درود

http://www.w3schools.com/jquery/jquery_hide_show.asp

دمو :

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

یا

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

[beh9am 96]

درود

تشکر تونستم درست کنم

الان من از این مورد استفاده میکنم

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

و کد

<script>
function toggleAndChangeText() {
	 $('#divToToggle').toggle();
	 if ($('#divToToggle').css('display') == 'none') {
		 $('#aTag').html('نمایش ►');
	 }
	 else {
		 $('#aTag').html('بستن ▼');
	 }
}
</script>

کد html :

<a id="aTag" style="float:left" href="javascript:toggleAndChangeText();">
   بستن ▼
</a>
<div id="divToToggle" class="content">
محتوا
</div>

حالا یک مشکل هست

من در صفحه خودم 15 تا div دارم که محتویاتی که میخوام پنهان بشه و با کلیک باز بشن همنام هستن

حالا وقتی بر روی یکیش کلیک میشه هر 15 تا div با هم باز و بسته میشن

اگر بخوام تک تک باشن باید 15 بار از این کد با نام های مختلف استفاده بکنم ؟

تشکر

ویرایش شده آذر 93 توسط beh9am

[علی زینلی 2114]

نه دیگه ،

لازم نیست

کافیه از یه PHP برای زیاد کردن اعداد بعد href و ID استفاده کنی.

تو نمونه ی showonlyoneش نوشته.

نمونه کد:

for ($x = 0; $x <= 15; $x++) {
   echo "<div id='newboxe$x'>test</div> <br>";
}

[beh9am 96]

نه دیگه ،

لازم نیست

کافیه از یه PHP برای زیاد کردن اعداد بعد href و ID استفاده کنی.

تو نمونه ی showonlyoneش نوشته.

نمونه کد:

for ($x = 0; $x <= 15; $x++) {
echo "<div id='newboxe$x'>test</div> <br>";
}

ببخشید من یه کم مبتدی هستم

یعنی الان میگید من یک بار کد js رو بزارم و برای div ها از اینphp که دادید استفاده بکنم ؟

یه کم گیج شدم ببخشید

[علی زینلی 2114]

خب اشکالی نداره ،

شما از همون کد toggle (اوّلی) استفاده کن

هر بار به عدد 1 یدونه اضافه کن

ابتدا توی head سایت کد زیر رو بذار:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function toggleDiv(divId) {
   $("#"+divId).toggle();
}
</script>

بعد کد زیر رو بذار هر جا که میخوای:

<a href="javascript:toggleDiv('myContent1');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
<div id="myContent1" style="background-color: #aaa; padding: 5px 10px;">
test
</div>

درواقع توی کد بالا فقط گزینه myContent1 رو هر بار به یدونه بیشتر تبدیل کن

این شکلی:

<a href="javascript:toggleDiv('myContent2');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
<div id="myContent2" style="background-color: #aaa; padding: 5px 10px;">
test
</div>

[beh9am 96]

خب اشکالی نداره ،

شما از همون کد toggle (اوّلی) استفاده کن

هر بار به عدد 1 یدونه اضافه کن

ابتدا توی head سایت کد زیر رو بذار:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>

بعد کد زیر رو بذار هر جا که میخوای:

<a href="javascript:toggleDiv('myContent1');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
<div id="myContent1" style="background-color: #aaa; padding: 5px 10px;">
test
</div>

درواقع توی کد بالا فقط گزینه myContent1 رو هر بار به یدونه بیشتر تبدیل کن

این شکلی:

<a href="javascript:toggleDiv('myContent2');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
<div id="myContent2" style="background-color: #aaa; padding: 5px 10px;">
test
</div>

تشکر

الان فقط یک مشکل هست

چجوری میتونم متن نوشته هارو تو حالت مختلف تغییر بدم ؟

یعنی زمانی که div باز هست متن رو بزنه بستن

و زمانی که div بسته هست بنویسه مشاهده

( عکس های پست اول رو ببینید متوجه منظورم میشید )

تشکر

[beh9am 96]

بعد ببخشید یک سوال دیگه وقتی میخوام از

.slideToggle()

استفاده بکنم که باز شدن div ها زیباتر باشه کار نمیکنه

[imanfakhar 26231]

می تونید بجای تکرار مکرر کد از جی کوئری استفاده تا در کل قالبتون به صورت یکسان اجرا بشه

نمونه

http://jsfiddle.net/fakhar/r67Lsm0m/

[beh9am 96]

می تونید بجای تکرار مکرر کد از جی کوئری استفاده تا در کل قالبتون به صورت یکسان اجرا بشه

نمونه

http://jsfiddle.net/fakhar/r67Lsm0m/

یک دنیا ممنون جناب فخار

حدود یک هفته معطل شدم خیلی خودم سعی کردم درستش کنم اما نشد در آخر هم این صبر کردن واقعا ارزش داشت

از شما و آقای زینلی تشکر میکنم تو هیچ انجمنی جوابم رو ندادن

یک سوال جناب فخار : من الان html و css را در حد متوسط به بالا میدونم و php هم در طول این مدت کمی آشنا شدن در حد خوندن و تفسیر کدها

الان به نظرتون من چجوری میتونم جاوااسکریپت یا جی کوئری را یاد بگیرم ؟

و اینکه فرق جاوااسکریپت با جی کوئری چیه ؟ ( چون هر 2 مثل هم هستن )

خدا خیرتون بده

ممنون

ویرایش شده دی 93 توسط beh9am

[imanfakhar 26231]

جی کوئری یکی از کتابخانه های جاوا اسکریپته و زبان برنامه نویسی جداگانه نیست

برای یادگیریشون از

http://www.w3schools.com/

شروع کنید