رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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

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

v5zd78jjqdex2b9364je.jpg

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

mhig0wci5xsf5akjm7f1.jpg

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

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

تشکر

ویرایش شده توسط beh9am
لینک به ارسال

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

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

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

لینک به ارسال

درود

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

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


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 بار از این کد با نام های مختلف استفاده بکنم ؟

تشکر

ویرایش شده توسط beh9am
لینک به ارسال

نه دیگه ،

لازم نیست

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

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

نمونه کد:

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

لینک به ارسال

نه دیگه ،

لازم نیست

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

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

نمونه کد:

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

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

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

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

لینک به ارسال

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

شما از همون کد 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>

لینک به ارسال
  • 2 هفته بعد...

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

شما از همون کد 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 بسته هست بنویسه مشاهده

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

تشکر

لینک به ارسال

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


.slideToggle()

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

لینک به ارسال

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

نمونه

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

لینک به ارسال
ارسال شده در (ویرایش شده)

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

نمونه

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

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

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

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

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

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

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

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

ممنون

ویرایش شده توسط beh9am
لینک به ارسال

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

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

http://www.w3schools.com/

شروع کنید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...