Реализация аккордеона.

Разработка Реализация аккордеона.

Нет прав для скачивания
Необычная реализация аккордеона.
Пишем нашу разметку:
HTML:
<div class="accordion">
  <ul>
    <li tabindex="1">
      <div>
        <div class="btn">
          <div class="number">1</div>
          <div class="content">
            <h2>Computer Science</h2>
            <p>I'm a Computer Science Engineer (B.Tech.) </p>
            <a data-fancybox data-src="#cs" href="javascript:;">Read more</a>
          </div>
        </div>
      </div>
    </li>
    <li tabindex="2">
      <div>
        <div class="btn">
          <div class="number">2</div>
          <div class="content">
          <h2>Cyber Security</h2>
            <p>I'm also a Cyber Security Student (M.Tech.)</p>           
            <a data-fancybox data-src="#cbs" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>
    <li tabindex="3">
      <div>
        <div class="btn">
          <div class="number">3</div>         
          <div class="content">
          <h2>Ethical Hacker</h2>
          <p>I'm also interested in Ethical Hacking.</p>
            <a data-fancybox data-src="#eh" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>
    <li tabindex="4">
      <div>
        <div class="btn">
          <div class="number">4</div>         
          <div class="content">
          <h2>Web Developer</h2>
          <p>I'm also a Web Developer.</p>
            <a data-fancybox data-src="#wd" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>
    <li tabindex="5">
      <div>
        <div class="btn">
          <div class="number">5</div>       
          <div class="content">
          <h2>Python Enthusiast</h2>
          <p>During my M.Tech i got interested in Python Programming.</p>
            <a data-fancybox data-src="#pe" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>
    <li tabindex="6">
      <div>
        <div class="btn">
          <div class="number">6</div>       
          <div class="content">
          <h2>Machine Learning</h2>
          <p>With the research work, i became a Machine Learning Entusiast.</p>
            <a data-fancybox data-src="#ml" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>
     <li tabindex="7">
      <div>
        <div class="btn">
          <div class="number">7</div>
          <div class="content">
          <h2>Code Lover</h2>
          <p>I really like to code every now and then.</p>
            <a data-fancybox data-src="#cl" href="javascript:;">Read more</a>
        </div>
        </div>
      </div>
    </li>   
  </ul>
</div>

<div style="display: none;" id="cs">
    <h2>1. Computer Science</h2>
    <p>Todas as empresas possuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="cbs">
    <h2>2. Cyber Security</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="eh">
    <h2>3. Ethical Hacker</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="wd">
    <h2>4. Web Developer</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="pe">
    <h2>5. Python Enthusiast</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="ml">
    <h2>6. Machine Learning Enthusiast</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="cl">
    <h2>7. Code Lover</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="ml">
    <h2>6. Machine Learning Enthusiast</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
<div style="display: none;" id="8l">
    <h2>7. Code Lover</h2>
    <p> This is same as first ossuem dados próprios, mesmo que não explorados. O
primeiro passo da jornada é utilizar as informações que sua organização já possui. A
coleta de dados reúne as informações de todos os sistemas dentro da empresa, sejam
eles vindos de ERPs, CRMs, Sistemas diversos, planilhas ou qualquer outro tipo de
dado, organizamos os pipelines de entrada para um repositório confiável.</p>
</div>
Стиль весьма большой вы его можете взять в приложенном файле, смотрим сразу реализацию:
dr32.gif
Автор
baltun
Скачиваний
1
Просмотры
488
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ