Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Скрипт показать/спрятать контент в jQuery


Recommended Posts

Добрый день!

Помогите справится с скриптом

Есть:

 <script>
            $(function () {
                var ul = $('.field8 ul ul')
                $('.field8 a, #close').click(function () {
                    ul.slideToggle();
                })
                 $('html').click(function (event) {
                 if($(event.target).parents(".field8").size()) return;
                   ul.slideUp();
                });
            });
        </script>

Ареализовать надо следующую задачу (в загруженых изобрадениях):

 

FAQ.jpg

Надіслати
Поділитися на інших сайтах


3 минуты назад, anboza сказал:

Супер! Спасибо. Почти то что надо

А как сделать что бы менялся еще текс ссылки. Я имею ввиду + -

Вот код:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

Надіслати
Поділитися на інших сайтах


Перенес вроде все как в примере https://bootsnipp.com/snippets/3kB4m. А у меня не работает, имею ввиду + -. Подскажите пож. ну где тут ошибка моя. У меня подключен jquery-2.1.1.min.js, а в примере jquery-1.11.1.min.js Может в этом причина?:


  <style type="text/css">
    .panel-group .panel {border-radius: 0; box-shadow: none; border-color: #EEEEEE;}
    .panel-default > .panel-heading {padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE;}
    .panel-title {   font-size: 14px; }
    .panel-title > a {display: block; padding: 15px; text-decoration: none;}
    .more-less {float: right; color: #212121;}
    .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE;}
    .demo {padding-top: 60px; padding-bottom: 60px; width: 100%;}
  </style>

 

<script type="text/javascript">
    function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);    

</script>

 

<div class="container demo">

    
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
    

Надіслати
Поділитися на інших сайтах


Вместо: 

<i class="more-less glyphicon glyphicon-plus"></i>

Вставить: 
 

<span visible>+</span><span hidden>-</span>

И:
 

$('.panel-default').click(function(){
	$(this).find('span').toggle();
});

Или вам именно иконки нужны? 

Змінено користувачем veterph
Надіслати
Поділитися на інших сайтах


19 минут назад, veterph сказал:

Вместо: 


<i class="more-less glyphicon glyphicon-plus"></i>

Вставить: 
 


<span visible>+</span><span hidden>-</span>

И:
 


$('.panel-group').click(function(){
	$(this).find('span').toggle();
});

Или вам именно иконки нужны? 

Та нет мне без разницы, но все одно неработает. Я уже мля незнаю что делать

Надіслати
Поділитися на інших сайтах


2 часа назад, Tom сказал:

Перенес вроде все как в примере https://bootsnipp.com/snippets/3kB4m. А у меня не работает, имею ввиду + -. Подскажите пож. ну где тут ошибка моя. У меня подключен jquery-2.1.1.min.js, а в примере jquery-1.11.1.min.js Может в этом причина?:


  <style type="text/css">
    .panel-group .panel {border-radius: 0; box-shadow: none; border-color: #EEEEEE;}
    .panel-default > .panel-heading {padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE;}
    .panel-title {   font-size: 14px; }
    .panel-title > a {display: block; padding: 15px; text-decoration: none;}
    .more-less {float: right; color: #212121;}
    .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE;}
    .demo {padding-top: 60px; padding-bottom: 60px; width: 100%;}
  </style>

 

<script type="text/javascript">
    function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);    

</script>

 

<div class="container demo">

    
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div><!-- panel-group -->

Надіслати
Поділитися на інших сайтах


3 минуты назад, artemleon сказал:

Та нет мне без разницы, но все одно неработает. Я уже мля незнаю что делать

Кэш обновляли? Сайт можно увидеть? 

Надіслати
Поділитися на інших сайтах


14 минут назад, veterph сказал:

Кэш обновляли? Сайт можно увидеть? 

кэш браузера и сайта очищал.

Вот код модуля в котором мне надо сделать что бы при открытии окна + иенялся на минус.


<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<style type="text/css">
    .panel-group .panel {border-radius: 0; box-shadow: none; border-color: #EEEEEE;}
    .panel-default > .panel-heading {padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE;}
    .panel-title {   font-size: 14px; }
    .panel-title > a {display: block; padding: 15px; text-decoration: none;}
    .more-less {float: right; color: #212121;}
    .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE;}
    .demo {padding-top: 60px; padding-bottom: 60px; width: 100%;}
  </style>
                             
<script type="text/javascript">function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').click(function(){
    $(this).find('span').toggle();
});
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
</script>
                           
<body>
<div class="demo">
    
    <div  id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <span visible>+</span><span hidden>-</span>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
    
    
</div><!-- container -->
                            
</body>


 

Надіслати
Поділитися на інших сайтах


1 минуту назад, artemleon сказал:

кэш браузера и сайта очищал.

Вот код модуля в котором мне надо сделать что бы при открытии окна + иенялся на минус.


<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<style type="text/css">
    .panel-group .panel {border-radius: 0; box-shadow: none; border-color: #EEEEEE;}
    .panel-default > .panel-heading {padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE;}
    .panel-title {   font-size: 14px; }
    .panel-title > a {display: block; padding: 15px; text-decoration: none;}
    .more-less {float: right; color: #212121;}
    .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE;}
    .demo {padding-top: 60px; padding-bottom: 60px; width: 100%;}
  </style>
                             
<script type="text/javascript">function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').click(function(){
    $(this).find('span').toggle();
});
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
</script>
                           
<body>
<div class="demo">
    
    <div  id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <span visible>+</span><span hidden>-</span>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
    
    
</div><!-- container -->
                            
</body>


 

https://e-kram.com.ua/page смотрите ссылку покупка

Надіслати
Поділитися на інших сайтах


24 минуты назад, artemleon сказал:

https://e-kram.com.ua/page смотрите ссылку покупка

$('.panel-default a').click(function(){
	$(this).find('span').toggle();
});

Прозевал...  

И уберите height:100% у блока .help

Змінено користувачем veterph
Надіслати
Поділитися на інших сайтах


15 минут назад, veterph сказал:

$('.panel-default a').click(function(){
	$(this).find('span').toggle();
});

Прозевал...  

Я уже ничего не понимаю.) Вот что получилось:

<script type="text/javascript">
    function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').click(function(){
    $(this).find('span').toggle();
});
$('.panel-default a').click(function(){
    $(this).find('span').toggle();
});

$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);    

</script>

Но неработает

Надіслати
Поділитися на інших сайтах


17 минут назад, artemleon сказал:

Я уже ничего не понимаю.) Вот что получилось:

<script type="text/javascript">
    function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').click(function(){
    $(this).find('span').toggle();
});
$('.panel-default a').click(function(){
    $(this).find('span').toggle();
});

$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);    

</script>

Но неработает

Сделайте просто: 
 

<script>
	$('.panel-default a').click(function(){
	$(this).find('span').toggle();
	});
</script>

Уберите лишнее. 

Можете показать непосредственно файл, где у вас код?

Змінено користувачем veterph
Надіслати
Поділитися на інших сайтах


12 минут назад, veterph сказал:

Сделайте просто: 
 


<script>
	$('.panel-default a').click(function(){
	$(this).find('span').toggle();
	});
</script>

Уберите лишнее. 

Можете показать непосредственно файл, где у вас код?

<?php echo $header; ?>
 <!-- breadcrumb -->
<div class="breadcrumb-holder" style="margin-bottom: -5px;margin-top: 2px;">
<div class="container">
<span id="title-holder">&nbsp;</span>
<div class="links-holder">
<a class="basel-back-btn" onClick="history.go(-1); return false;"><i></i></a><span>&nbsp;</span>
</div>
</div>
</div>
<div class="container">
  <ul class="breadcrumb">
    <?php $breadlast = array_pop($breadcrumbs); foreach ($breadcrumbs as $breadcrumb) { ?>
      <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
    <li><?php echo $breadlast['text']; ?></li>
  </ul>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type="text/css">
  .row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 300px;}
  .help{width:100%;height:100%;display:inline-block;background:#eee;padding:20px;margin:0 10px;opacity:0;position: absolute;}
  .help.active{opacity:1}
  </style>
<script type="text/javascript">
$(window).load(function() {
    var id, pause = 300;
    $("body").on("mouseenter", "[data-help]", function(b) {
        id = $(this).data("help");
        this.pause = pause;
        $(this).stop(!0).animate({
            pause: 0
        }, pause, function() {
            id == $(this).data("help") && ($(".help").removeClass("active"), $(id).addClass("active"))
        })
    }).on("mouseleave", "[data-help]", function(b) {
        id = null
    })
});
</script>
<div class="row first-step">
<div class="space-lg"></div>
    <div class="col-xs-12">
      <div class="row row-eq-height">

<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<ul id="navbar">
  <li><a data-help="#log1">Загальні питання</a></li>
  <li><a data-help="#log2">Про магазин</a></li>
  <li><a data-help="#log3">Продаж</a></li>
  <li><a data-help="#log4">Покупка</a></li>
</ul>

</div>
<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12">
<div id="log1" class="help wow flipInX" data-wow-offset="200">Загальні питання</div>
<div id="log2" class="help wow flipInX" data-wow-offset="200">Про магазин</div>
<div id="log3" class="help wow flipInX" data-wow-offset="200">Продаж</div>
<div id="log4" class="help">


<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<style type="text/css">
    .panel-group .panel {border-radius: 0; box-shadow: none; border-color: #EEEEEE;}
    .panel-default > .panel-heading {padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE;}
    .panel-title {   font-size: 14px; }
    .panel-title > a {display: block; padding: 15px; text-decoration: none;}
    .more-less {float: right; color: #212121;}
    .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE;}
   
  </style>
                             
<script>
    $('.panel-default a').click(function(){
    $(this).find('span').toggle();
    });
</script>
                           
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                        <span visible>+</span><span hidden>-</span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>


</div>

</div>
</div>
</div>
</div>
<div class="space-lg"></div>

</div>

<?php echo $footer; ?>

Надіслати
Поділитися на інших сайтах


9 минут назад, artemleon сказал:

 

Мистика какая-то... У меня всё работает. Да и на вашем сайте через консоль - тоже работает. На данный момент не вижу проблемы. Буду искать. Любопытно самому. Я, увы, не могу похвастаться высокими знаниями, поэтому могу что-то упускать. Так или иначе, если не разберемся, всё равно более опытные добрые люди подскажут : ) 

Надіслати
Поділитися на інших сайтах


7 минут назад, veterph сказал:

Мистика какая-то... У меня всё работает. Да и на вашем сайте через консоль - тоже работает. На данный момент не вижу проблемы. Буду искать. Любопытно самому. Я, увы, не могу похвастаться высокими знаниями, поэтому могу что-то упускать. Так или иначе, если не разберемся, всё равно более опытные добрые люди подскажут : ) 

Я если чесно, уже незнаю что делать. И так и сяк пробую, все попусту. Незнаю что и делать уже.

Надіслати
Поділитися на інших сайтах


5 минут назад, artemleon сказал:

Я если чесно, уже незнаю что делать. И так и сяк пробую, все попусту. Незнаю что и делать уже.

Если есть желание - дайте доступ. Точно сделаем. 

Надіслати
Поділитися на інших сайтах


3 минуты назад, veterph сказал:

Если есть желание - дайте доступ. Точно сделаем. 

К фтр?

Если да, то дайте мне пож. свой ip

мое мыло [email protected]

Змінено користувачем artemleon
Надіслати
Поділитися на інших сайтах


Коротко по сути, есть код, работающий, все ок. Но При попытке размножить его ничего не получается. Вместе они не работают. Где то они конфликтуют друг с другом. Сможете подсказать? Ниже скрин обоих фрагментов.

 

Вот он первый код:

<div id="log4" class="help" style="height:auto;z-index:9">

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading41">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse41" aria-expanded="false" aria-controls="collapse41"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title41; ?></a>
</h4>
</div>
<div id="collapse41" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading41">
<div class="panel-body"><?php echo $text_page_text41; ?></div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading42">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse42" aria-expanded="false" aria-controls="collapse42"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title42; ?></a>
</h4>
</div>
<div id="collapse42" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading42">
<div class="panel-body"><?php echo $text_page_text42; ?></div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading43">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse43" aria-expanded="false" aria-controls="collapse43"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title43; ?></a>
</h4>
</div>
<div id="collapse43" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading43">
<div class="panel-body"><?php echo $text_page_text43; ?></div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading44">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse44" aria-expanded="false" aria-controls="collapse44"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title44; ?></a>
</h4>
</div>
<div id="collapse44" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading44">
<div class="panel-body"><?php echo $text_page_text44; ?></div>
</div>
</div>

</div>

 

Вот второй:

<div id="log3" class="help" style="height:auto;z-index:9">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

 

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="heading31">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse31" aria-expanded="false" aria-controls="collapse31"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title31; ?></a>

</h4>

</div>

<div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31">

<div class="panel-body"><?php echo $text_page_text31; ?></div>

</div>

</div>

 

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="heading32">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse32" aria-expanded="false" aria-controls="collapse32"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title32; ?></a>

</h4>

</div>

<div id="collapse32" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading32">

<div class="panel-body"><?php echo $text_page_text32; ?></div>

</div>

</div>

 

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="heading33">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse33" aria-expanded="false" aria-controls="collapse33"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title33; ?></a>

</h4>

</div>

<div id="collapse33" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading33">

<div class="panel-body"><?php echo $text_page_text33; ?></div>

</div>

</div>

 

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="heading34">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse34" aria-expanded="false" aria-controls="collapse34"><span visible><i class="more-less glyphicon glyphicon-plus"></i></span><span hidden><i class="more-less glyphicon glyphicon-minus"></i></span><?php echo $text_page_title34; ?></a>

</h4>

</div>

<div id="collapse34" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading34">

<div class="panel-body"><?php echo $text_page_text34; ?></div>

</div>

</div>

</div>

 

 

Надіслати
Поділитися на інших сайтах


51 минуту назад, artemleon сказал:

Подскажите пож. где ошипка в данном модуле. Я его до сих пор немогу закончить. Ничерта не понимаю.

Разве вчера не закончили? Что ещё не так? 

Надіслати
Поділитися на інших сайтах


Гість
Ця тема закрита для публікації повідомлень.
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.