Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


Рекомендованные сообщения

Добрый день!

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

Есть:

 <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 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.