Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Въпрос за акордеон

Последователи

Нова тема
Отговор в тази тема

7 юни 20233 г.

Здравейте,

Боричкам се вече два дена като прасе с тиква но не мога да направя акордеона като на този сайт .

Стигнал съм само до + , но не мога да направя вертикалните три точки.

Цитат

<style>
.accordion {
background-color: white;
color: red;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
font-weight: bold;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: white;
}

.accordion:after {
content: '\229e';
color: #989898;
font-weight: bold;
float: left;
margin-left: 5px;
}

.active:after {
content: "\2014";
float: left;
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>

Може ли малко да помогнете с кода?

Цитирай

7 юни 20233 г.

Много ли е теудно да формулирате въпрос който да предполага получаване на отговор?

Цитирай

7 юни 20233 г.

Автор

преди 22 минути, mr mcwolf написа:

Много ли е теудно да формулирате въпрос който да предполага получаване на отговор?

Стигнал съм само до + , но не мога да направя вертикалните три точки.

Може ли малко да помогнете с кода?

Цитирай

7 юни 20233 г.

Какво значи "да помогнете с кода", като код няма?

Какво значи "е мога да направя вертикалните три точки"? Ако става дума за content атрибута https://www.w3.org/TR/xml-entity-names/025.html но пък графичното представяне си зависи от избрания шрифт.

Отделно, не става ясно как искаш да е логиката на тоя елемент. Ако ще е чист CSS ти трябват state елементи. Ако съдържанието ще е динамично (ajax) ти трябва и javascript.

Между другото, точките не се правят така. За тях се стилизира псевдоелементът ::before със съответната рамка, дебелина и цвят.

Цитирай

7 юни 20233 г.

Автор

преди 14 минути, mr mcwolf написа:

Какво значи "да помогнете с кода", като код няма?

Какво значи "е мога да направя вертикалните три точки"? Ако става дума за content атрибута https://www.w3.org/TR/xml-entity-names/025.html но пък графичното представяне си зависи от избрания шрифт.

Отделно, не става ясно как искаш да е логиката на тоя елемент. Ако ще е чист CSS ти трябват state елементи. Ако съдържанието ще е динамично (ajax) ти трябва и javascript

Прав си. Трябваше да кача всичко. Ето-

Цитат

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<style>
.accordion {
background-color: white;
color: red;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
font-weight: bold;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: white;
}

.accordion:after {
content: '\229e';
color: #989898;
font-weight: bold;
float: left;
margin-left: 5px;
}

.active:after {
content: "\2014";
float: left;
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>

<body>

<div id="wrap">

<button class="accordion">⋯ Изделие 5</button>

<div class="panel">
<p>Lorem ipsum dolor.</p>
</div>

<button class="accordion">⋯ Изделие 4</button>
<div class="panel">
<p>Lorem ipsum dolor.</p>
</div>

<button class="accordion">⋯ Изделие 3</button>
<div class="panel">
<p>Lorem ipsum dolor.</p>
</div>

<button class="accordion">⋯ Изделие 2</button>
<div class="panel">
<p>Lorem ipsum dolor.</p>
</div>

<button class="accordion">⋯ Изделие 1</button>
<div class="panel">
<p>Lorem ipsum dolor.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
});
}
</script>

</html>

Цитирай

7 юни 20233 г.

Ето ти пример за стилизиране на подменюто

<html>

    <head>

        <style>

            ul {
                list-style: none;
            }

            li {
                position: relative;
            }

            li::before {
                content: '';
                
                display: inline-block;
                width: 10px;
                height: 10px;

                position: relative;
                top: -4px;
                
                border-bottom: 1px dotted #000;
            }

            li::after {
                content: '';

                display: inline-block;
                width: 10px;
                height: 100%;

                position: absolute;
                left: 0px;
                
                border-left: 1px dotted #000;
            }

            li:last-child::after {
                height: calc(100% - 8px);
            }

        </style>

    </head>

    <body>
 
        <ul>
            <li>&nbsp;row 1</li>
            <li>&nbsp;row 2</li>
            <li>&nbsp;row 3</li>
        </ul>

    <body>

</html>

Цитирай

7 юни 20233 г.

Автор

преди 31 минути, mr mcwolf написа:

Ето ти пример за стилизиране на подменюто

<html>

    <head>

        <style>

            ul {
                list-style: none;
            }

            li {
                position: relative;
            }

            li::before {
                content: '';
                
                display: inline-block;
                width: 10px;
                height: 10px;

                position: relative;
                top: -4px;
                
                border-bottom: 1px dotted #000;
            }

            li::after {
                content: '';

                display: inline-block;
                width: 10px;
                height: 100%;

                position: absolute;
                left: 0px;
                
                border-left: 1px dotted #000;
            }

            li:last-child::after {
                height: calc(100% - 8px);
            }

        </style>

    </head>

    <body>
 
        <ul>
            <li>&nbsp;row 1</li>
            <li>&nbsp;row 2</li>
            <li>&nbsp;row 3</li>
        </ul>

    <body>

</html>

Стои съвсем статично. А при моето като натисна плюса - се раздвижва и отваря подменюто.

Цитирай

14 юни 20232 г.

Ако можеш го изсвири, значи го можеш, но някак не ми се верува 😉

Цитирай

14 юни 20232 г.

или това...

Цитирай

2 седмици по-късно...

22 юни 20232 г.

<!DOCTYPE html>
<html>
<head>
  <style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active,
    .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }
  </style>
</head>
<body>

<h2>Accordion Menu Example</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Content for Section 1...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Content for Section 2...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Content for Section 3...</p>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>

</body>
</html>

И. т.н.т. Може да се преработи.

Цитирай

22 юни 20232 г.

Автор

преди 50 минути, rtx написа:

<!DOCTYPE html>
<html>
<head>
  <style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active,
    .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }
  </style>
</head>
<body>

<h2>Accordion Menu Example</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Content for Section 1...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Content for Section 2...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Content for Section 3...</p>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>

</body>
</html>

И. т.н.т. Може да се преработи.

Това се отваря, но няма плюсчета ...

Цитирай

23 юни 20232 г.

<!DOCTYPE html>
<html>
<head>
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .active,
        .accordion:hover {
            background-color: #ccc;
        }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h2>Accordion Menu Example</h2>

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Content for Section 1...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Content for Section 2...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
    <p>Content for Section 3...</p>
</div>

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    function togglePanel() {
        var panel = this.nextElementSibling;
        this.classList.toggle("active");
        panel.style.display = panel.style.display === "block" ? "none" : "block";
    }

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", togglePanel);
    }
</script>

</body>
</html>

Тествах го. Може да провериш в дясно са "+"-четта.

Цитирай

23 юни 20232 г.

Автор

преди 22 минути, rtx написа:

<!DOCTYPE html>
<html>
<head>
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .active,
        .accordion:hover {
            background-color: #ccc;
        }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h2>Accordion Menu Example</h2>

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Content for Section 1...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Content for Section 2...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
    <p>Content for Section 3...</p>
</div>

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    function togglePanel() {
        var panel = this.nextElementSibling;
        this.classList.toggle("active");
        panel.style.display = panel.style.display === "block" ? "none" : "block";
    }

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", togglePanel);
    }
</script>

</body>
</html>

Тествах го. Може да провериш в дясно са "+"-четта.

Няма плюсове !

Няма и на Мозила и на Хром...

Цитирай

24 юни 20232 г.

Странно.. качих го и на хостинг:

Линк: http://ebulgaria.bg/menu-1.htm

Копирай пак сорс кода от този линк.

Цитирай

2 седмици по-късно...

6 юли 20232 г.

Автор

Намерих код съвсем близо до това, което търся. Въпросните + ги има, макар и от дясно.

Сега обаче не мога да направя така, че когато един ред на акордеона е отворен - другите да са затворени. А те не се затварят и заемат много място надолу. Как да направя всички бе един да са затворени?

10х

Цитат

<!DOCTYPE html>
<html lang="bg">
    <head>
   <style>
   button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>

    </head>
    <body>
   <div id="container">
           <div id="themes" class="box">
           <ul>
            <button class="accordion">Section 1</button>
            <div class="panel">
                <p>Lorem ...</p>
            </div>
                <button class="accordion">Section 2</button>
            <div class="panel">
                <p>Lorem ...</p>
            </div>
                <button class="accordion">Section 3</button>
            <div id="foo" class="panel">
                <p>Lorem ...</p>
            </div>
               </ul>
           </div>
   </div>
        <script>
          var acc = document.getElementsByClassName("accordion");
          var i;

          for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function(){
         this.classList.toggle("active");
         this.nextElementSibling.classList.toggle("show");
           }
         }
        </script>
    </body>
</html>

Цитирай

6 юли 20232 г.

При клик махаш класовете от другите и готово

for (let e of acc) {
    if (e !== this) {
        e.classList.remove("active");
        e.nextElementSibling.classList.remove("show");
    }
}

Цитирай

6 юли 20232 г.

Автор

преди 6 часа, piх3l написа:
При клик махаш класовете от другите и готово
for (let e of acc) {
    if (e !== this) {
        e.classList.remove("active");
        e.nextElementSibling.classList.remove("show");
    }
}

Това дето си ми го дал - не тръгна.

Цитирай

7 юли 20232 г.

Ти къде го сложи?

Цитирай

7 юли 20232 г.

Автор

преди 1 час, piх3l написа:

Ти къде го сложи?

Махнах всичко от моя скрипт и сложих твоето:

Цитат

        <script>
          var acc = document.getElementsByClassName("accordion");
          var i;

          for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function(){
         this.classList.toggle("active");
         this.nextElementSibling.classList.toggle("show");
           }
         }
        </script>

Цитат

for (let e of acc) {
    if (e !== this) {
        e.classList.remove("active");
        e.nextElementSibling.classList.remove("show");
    }
}

</script>

Цитирай

7 юли 20232 г.

Върни всичко, както си е било и добави моя код в onclick callback-а... тоест, под this.nextElementSibling.classList.toggle("show");

Цитирай

7 юли 20232 г.

Автор

преди 26 минути, piх3l написа:

Върни всичко, както си е било и добави моя код в onclick callback-а... тоест, под this.nextElementSibling.classList.toggle("show");

Направих го . Отварят се и трите. :brickwall:

Цитат

<!DOCTYPE html>
<html lang="bg">
    <head>
    <style>
    button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>

    </head>
    <body>
    <div id="container">
            <div id="themes" class="box">
            <ul>
            <button class="accordion">Section 1</button>
            <div class="panel">
                <p>Lorem ...</p>
            </div>
                <button class="accordion">Section 2</button>
            <div class="panel">
                <p>Lorem ...</p>
            </div>
                <button class="accordion">Section 3</button>
            <div id="foo" class="panel">
                <p>Lorem ...</p>
            </div>
                </ul>
            </div>
    </div>
        <script>
          var acc = document.getElementsByClassName("accordion");
          var i;

          for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function(){
         this.classList.toggle("active");
         this.nextElementSibling.classList.toggle("show");
           }
         }
for (let e of acc) {
    if (e !== this) {
        e.classList.remove("active");
        e.nextElementSibling.classList.remove("show");
               }
         }
        </script>
    </body>
</html>

Цитирай

7 юли 20232 г.

Ама да го беше махнал от долната част... сложил си го два пъти на различни места

<!DOCTYPE html>
<html lang="bg">
    <head>
        <style>
            button.accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 5px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }

            button.accordion.active, button.accordion:hover {
                background-color: #ddd;
            }

            button.accordion:after {
                content: '\02795';
                font-size: 13px;
                color: #777;
                float: right;
                margin-left: 5px;
            }

            button.accordion.active:after {
                content: "\2796";
            }

            div.panel {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: 0.6s ease-in-out;
                opacity: 0;
            }

            div.panel.show {
                opacity: 1;
                max-height: 500px;
            }
        </style>

    </head>
    <body>
        <div id="container">
            <div id="themes" class="box">
                <ul>
                    <button class="accordion">Section 1</button>
                    <div class="panel">
                        <p>Lorem ...</p>
                    </div>
                    <button class="accordion">Section 2</button>
                    <div class="panel">
                        <p>Lorem ...</p>
                    </div>
                    <button class="accordion">Section 3</button>
                    <div id="foo" class="panel">
                        <p>Lorem ...</p>
                    </div>
                </ul>
            </div>
        </div>
        <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
                acc[i].onclick = function(){
                    this.classList.toggle("active");
                    this.nextElementSibling.classList.toggle("show");

                    for (let e of acc) {
                        if (e !== this) {
                            e.classList.remove("active");
                            e.nextElementSibling.classList.remove("show");
                        }
                    }
                }
            }
        </script>
    </body>
</html>

Цитирай

7 юли 20232 г.

Автор

преди 42 минути, piх3l написа:

Ама да го беше махнал от долната част... сложил си го два пъти на различни места

<!DOCTYPE html>
<html lang="bg">
    <head>
        <style>
            button.accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 5px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }

            button.accordion.active, button.accordion:hover {
                background-color: #ddd;
            }

            button.accordion:after {
                content: '\02795';
                font-size: 13px;
                color: #777;
                float: right;
                margin-left: 5px;
            }

            button.accordion.active:after {
                content: "\2796";
            }

            div.panel {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: 0.6s ease-in-out;
                opacity: 0;
            }

            div.panel.show {
                opacity: 1;
                max-height: 500px;
            }
        </style>

    </head>
    <body>
        <div id="container">
            <div id="themes" class="box">
                <ul>
                    <button class="accordion">Section 1</button>
                    <div class="panel">
                        <p>Lorem ...</p>
                    </div>
                    <button class="accordion">Section 2</button>
                    <div class="panel">
                        <p>Lorem ...</p>
                    </div>
                    <button class="accordion">Section 3</button>
                    <div id="foo" class="panel">
                        <p>Lorem ...</p>
                    </div>
                </ul>
            </div>
        </div>
        <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
                acc[i].onclick = function(){
                    this.classList.toggle("active");
                    this.nextElementSibling.classList.toggle("show");

                    for (let e of acc) {
                        if (e !== this) {
                            e.classList.remove("active");
                            e.nextElementSibling.classList.remove("show");
                        }
                    }
                }
            }
        </script>
    </body>
</html>

Благодаря, сега работи!

:wors:

Цитирай

7 юли 20232 г.

Цитирай

Добавете отговор

Можете да публикувате отговор сега и да се регистрирате по-късно. Ако имате регистрация, влезте в профила си за да публикувате от него.

Публикацията ви съдържа термини, които не допускаме! Моля, редактирайте съдържанието си и премахнете подчертаните думи по-долу. Ако замените букви от думата със звездички или друго, за да заобиколите това предупреждение, профилът ви ще бъде блокиран и наказан!

Напишете отговор в тази тема...