Jump to content
покупайте без комиссии
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Скрипт показать/спрятать контент в 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

Link to post
Share on other sites

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>

Link to post
Share on other sites

Перенес вроде все как в примере 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 -->
    

Link to post
Share on other sites

Вместо: 

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

Вставить: 
 

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

И:
 

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

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

Edited by veterph
Link to post
Share on other sites

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

Вместо: 


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

Вставить: 
 


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

И:
 


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

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

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

Link to post
Share on other sites

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 -->

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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>


 

Link to post
Share on other sites

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 смотрите ссылку покупка

Link to post
Share on other sites

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

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

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

Прозевал...  

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

Edited by veterph
Link to post
Share on other sites

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>

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

Link to post
Share on other sites

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>

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

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

Edited by veterph
Link to post
Share on other sites

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; ?>

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

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

К фтр?

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

мое мыло buchinskij@gmail.com

Edited by artemleon
Link to post
Share on other sites

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

К фтр?

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

ЛС.

Link to post
Share on other sites

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

 

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

<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>

 

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Вопрос закрыт. Спасибо большое за помощь.

Link to post
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.