Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


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

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

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

Link to comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites


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

 

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

К фтр?

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

мое мыло [email protected]

Edited by artemleon
Link to comment
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 comment
Share on other sites


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

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

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

Link to comment
Share on other sites


Guest
This topic is now closed to further replies.
 Share

×
×
  • 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.