اکوردیون

اکوردیون ساده

این یک متن برای اکوردیون است.لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه , روزنامه و مجله در ستون و سطرآنچنان که لازم است

  
<div >
 <div >
  <h5> اکوردیون ساده </h5>
   </div>
    <div >
    <div >
     <div >
     <h2 >
      <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      آیتم اکوردیون #1
      </button>
     </h2>
     <div id="collapseOne" 
      data-bs-parent="#accordionExample">
      <div >
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
      و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
      کاربردی می باشد.
      </div>
     </div>
     </div>
     <div >
     <h2 >
      <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      آیتم اکوردیون #2
      </button>
     </h2>
     <div id="collapseTwo" data-bs-parent="#accordionExample">
      <div >
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
      و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
      کاربردی می باشد.
      </div>
     </div>
     </div>
     <div >
     <h2 >
      <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      آیتم اکوردیون #3
      </button>
     </h2>
     <div id="collapseThree" data-bs-parent="#accordionExample">
      <div >
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
    و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
    کاربردی می باشد.
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

اکوردیون حاشیه دار

  
<div >
 <div >
  <h5> اکوردیون حاشیه دار </h5>
   </div>
   <div >
    <div >
    <div >
     <h2 >
     <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseOneOutline" aria-expanded="true"
      aria-controls="collapseOneOutline">
      آیتم اکوردیون #1
     </button>
     </h2>
     <div id="collapseOneOutline" 
     data-bs-parent="#accordionExampleoutlineoutline">
     <div >
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
    و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
    کاربردی می باشد.
     </div>
     </div>
    </div>
    <div >
     <h2 >
     <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseTwooutline" aria-expanded="false"
      aria-controls="collapseTwooutline">
      آیتم اکوردیون #2
     </button>
     </h2>
     <div id="collapseTwooutline" 
     data-bs-parent="#accordionExampleoutlineoutline">
     <div >
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
    و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
    کاربردی می باشد.
     </div>
     </div>
    </div>
    <div >
     <h2 >
     <button type="button" data-bs-toggle="collapse"
      data-bs-target="#collapseThreeoutline" aria-expanded="false"
      aria-controls="collapseThreeoutline">
      آیتم اکوردیون #3
     </button>
     </h2>
     <div id="collapseThreeoutline" 
     data-bs-parent="#accordionExampleoutlineoutline">
     <div >
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
    و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
    کاربردی می باشد.
     </div>
   </div>
  </div>
  </div>
 </div>
</div>

روشن

این یک متن برای اکوردیون است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه , روزنامه و مجله در ستون و سطرآنچنان که لازم است

   
<div >
 <div >
  <h5> روشن </h5>
    </div>
    <div >
     <div id="accordionFlushExample">
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
       آیتم اکوردیون #1
      </button>
      </h2>
      <div id="flush-collapseOne" 
      data-bs-parent="#accordionFlushExample">
      <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</div>
      </div>
     </div>
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
       آیتم اکوردیون #2
      </button>
      </h2>
      <div id="flush-collapseTwo" 
      data-bs-parent="#accordionFlushExample">
      <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
      و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
      کاربردی می باشد.</div>
      </div>
     </div>
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#flush-collapseThree" aria-expanded="false"
       aria-controls="flush-collapseThree">
       آیتم اکوردیون #3
      </button>
      </h2>
      <div id="flush-collapseThree" 
      data-bs-parent="#accordionFlushExample">
      <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
      و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
      کاربردی می باشد.</div>
    </div>
   </div>
  </div>
 </div>
</div>

فلاش (بدون حاشیه)

   
<div >
 <div >
  <h5> Flush(No border)</h5>
   </div>
   <div >
    <div 
    id="accordionappflushExample">
    <div >
   <h2 >
    <button type="button" data-bs-toggle="collapse"
    data-bs-target="#appflush-collapseOne" aria-expanded="true"
    aria-controls="appflush-collapseOne">
    آیتم اکوردیون #1
    </button>
   </h2>
   <div id="appflush-collapseOne" 
    data-bs-parent="#accordionappflushExample">
    <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
  و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
  کاربردی می باشد.</div>
   </div>
    </div>
    <div >
   <h2 >
    <button type="button" data-bs-toggle="collapse"
    data-bs-target="#appflush-collapseTwo" aria-expanded="false"
    aria-controls="appflush-collapseTwo">
    آیتم اکوردیون #2
    </button>
   </h2>
   <div id="appflush-collapseTwo" 
    data-bs-parent="#accordionappflushExample">
    <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
  و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
  کاربردی می باشد.</div>
   </div>
    </div>
    <div >
   <h2 >
    <button type="button" data-bs-toggle="collapse"
    data-bs-target="#appflush-collapseThree" aria-expanded="false"
    aria-controls="appflush-collapseThree">
    آیتم اکوردیون #3
    </button>
   </h2>
   <div id="appflush-collapseThree" 
    data-bs-parent="#accordionrealExample">
    <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
  و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
  کاربردی می باشد.</div>
    </div>
    </div>
  </div>
 </div>
 </div>

پاسخ به سوالات متداول (مثال واقعی)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

                    
           
             <div >
             <div >
             <h5> پاسخ به سوالات متداول(مثال واقعی) </h5>
             </div>
             <div >
             <div id="accordionPanelsStayOpenExample">
             <div >
             <h2 >
             <button type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
              aria-controls="panelsStayOpen-collapseOne">
              <i ></i> لورم ایپسوم متن ساختگی ؟
             </button>
             </h2>
             <div id="panelsStayOpen-collapseOne" >
             <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
            و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
            کاربردی می باشد.
             </div>
             </div>
             </div>
             <div >
             <h2 >
             <button type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
              aria-controls="panelsStayOpen-collapseTwo">
              <i ></i> لورم ایپسوم متن ساختگی ؟
             </button>
             </h2>
             <div id="panelsStayOpen-collapseTwo" >
             <div >
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
            و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
            کاربردی می باشد.
             </div>
             </div>
             </div>
             <div >
             <h2 >
             <button type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
              aria-controls="panelsStayOpen-collapseThree">
              <i ></i> لورم ایپسوم متن ساختگی ؟
             </button>
             </h2>
             <div id="panelsStayOpen-collapseThree" >
             <div >
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
            و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
            کاربردی می باشد.
             </div>
             </div>
             </div>
             </div>
             </div>
             </div>

آیکن ها سمت راست

                    
           
             <div >
             <div >
             <h5> سمت راست همراه با آیکن </h5>
             </div>
             <div >
             <div
              
              id="accordionlefticonExample">
              <div >
              <h2 >
               <button type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseOne" aria-expanded="true"
               aria-controls="lefticon-collapseOne">
               لورم ایپسوم متن ساختگی ؟
               </button>
              </h2>
              <div id="lefticon-collapseOne" >
               <div >
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
              و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
              کاربردی می باشد.
               </div>
              </div>
              </div>
              <div >
              <h2 >
               <button type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
               aria-controls="lefticon-collapseTwo">
               لورم ایپسوم متن ساختگی ؟
               </button>
              </h2>
              <div id="lefticon-collapseTwo" >
               <div >
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
              و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
              کاربردی می باشد.
               </div>
              </div>
              </div>
              <div >
              <h2 >
               <button type="button" data-bs-toggle="collapse"
               data-bs-target="#lefticon-collapseThree" aria-expanded="false"
               aria-controls="lefticon-collapseThree">
               How long does it take to resolve my case?
               </button>
              </h2>
              <div id="lefticon-collapseThree" >
               <div >
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
              و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
              کاربردی می باشد.
               </div>
              </div>
              </div>
             </div>
             </div>
            </div>

بدون آیکن

<div >
  <div >
  <h5> بدون آیکن </h5>
  </div>
  <div >
  <div 
  id="accordionnoiconExample">
  <div >
  <h2 >
  <button type="button" data-bs-toggle="collapse"
  data-bs-target="#noicon-collapseOne" aria-expanded="true"
  aria-controls="noicon-collapseOne">
  <i ></i> لورم ایپسوم متن ساختگی ؟
  </button>
  </h2>
  <div id="noicon-collapseOne" >
  <div >
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد.
  </div>
  </div>
  </div>
  <div >
  <h2 >
  <button type="button" data-bs-toggle="collapse"
  data-bs-target="#noicon-collapseTwo" aria-expanded="false"
  aria-controls="noicon-collapseTwo">
  <i ></i> لورم ایپسوم متن ساختگی ؟
  </button>
  </h2>
  <div id="noicon-collapseTwo" >
  <div >
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد.
  </div>
  </div>
  </div>
  <div >
  <h2 >
  <button type="button" data-bs-toggle="collapse"
  data-bs-target="#noicon-collapseThree" aria-expanded="false"
  aria-controls="noicon-collapseThree">
  <i ></i> لورم ایپسوم متن ساختگی ؟
  </button>
  </h2>
  <div id="noicon-collapseThree" >
  <div >
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
  </div>
  </div>
  </div>
  </div>
  </div>
 </div>

اکوردیون چند سطحی

متن اکوردیون در اینجا ظاهر میشود. به صورت پیش فرض نمایش داده میشود.

این اولین آیتم اکوردیون است و به صورت پیش فرض نمایش داده میشود

لورم ایپسوم متن ساختگیبا تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز وکاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

<div >
   <div >
    <h5>اکوردیون چند سطحی </h5>
   </div>
   <div >
    <div id="nestingExample">
    <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
   data-bs-target="#nestingcollapseOne" aria-expanded="true" aria-controls="collapseOne">
   اکوردیون سطح 1 #1
    </button>
    </h2>
    <div id="nestingcollapseOne" 
    data-bs-parent="#nestingExample">
    <div >
   <strong>آیتم محتوای اکوردیون .</strong> به طور پیش فرض نمایش داده میشود
  
   <div 
    id="nestingtwoExample">
    <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
    data-bs-target="#nestingtwocollapseOne" aria-expanded="false"
    aria-controls="collapseOne">
    آیتم اکوردیون سطح 2 #1
    </button>
    </h2>
    <div id="nestingtwocollapseOne" 
    data-bs-parent="#nestingtwoExample">
    <div >
    آیتم محتوای اکوردیون به طور پیش فرض نمایش داده میشود
    </div>
    </div>
    </div>
    <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
    data-bs-target="#nestingtwocollapseTwo" aria-expanded="false"
    aria-controls="collapseTwo">
    آیتم اکوردیون سطح 2 #2
    </button>
    </h2>
    <div id="nestingtwocollapseTwo" 
    data-bs-parent="#nestingtwoExample">
    <div >
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
    و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
    کاربردی می باشد.
    </div>
    </div>
    </div>
  

      </div>
        </div>
        </div>
       </div>
    
    <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
   data-bs-target="#nestingcollapseTwo" aria-expanded="false" aria-controls="collapseTwo">
   اکوردیون سطح 1 #2
    </button>
    </h2>
    <div id="nestingcollapseTwo" 
    data-bs-parent="#nestingExample">
    <div >
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
  و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
  کاربردی می باشد.
    </div>
    </div>
    </div>
    </div>
   </div>
   </div>

میانبر

سبد خرید

سبد خرید شما خالی است

کل 346800000

اعلان

اعلان ندارید

اکوردیون

اکوردیون ساده

اکوردیون حاشیه دار

روشن

فلاش (بدون حاشیه)

پاسخ به سوالات متداول (مثال واقعی)

آیکن ها سمت راست

بدون آیکن

اکوردیون چند سطحی

سبد خرید شما خالی است

کل 346800000

اعلان ندارید

اکوردیون

اکوردیون ساده

آیتم اکوردیون #1

آیتم اکوردیون #2

آیتم اکوردیون #3

اکوردیون حاشیه دار

آیتم اکوردیون #1

آیتم اکوردیون #2

آیتم اکوردیون #3

روشن

آیتم اکوردیون #1

آیتم اکوردیون #2

آیتم اکوردیون #3

فلاش (بدون حاشیه)

آیتم اکوردیون #1

آیتم اکوردیون #2

آیتم اکوردیون #3

پاسخ به سوالات متداول (مثال واقعی)

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

آیکن ها سمت راست

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

بدون آیکن

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

لورم ایپسوم متن ساختگی با تولید ؟

اکوردیون چند سطحی

اکوردیون سطح یک #1

این اکوردیون سطح 2 است #1

این اکوردیون سطح 2 است #2

اکوردیون سطح یک #2