Разверните различные bootstrap collapse div с другой страницы

У меня есть 2 файла php. Это первый файл: services.РНР

<a href="#services1" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services1">
<div class="button-blue">Learn More</div>
</a>

<a href="#services2" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services2">
<div class="button-blue">Learn More</div>
</a>

<div class="solutions">
  <div id="services1" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
  </div>

  <div id="services2" class="collapse" >
    <section> CONTENT </section>
    <section> MORE CONTENT </section>
  </div>
</div>

Второй индекс файла.php имеет два веб-баннера, которые должны связать:

1-й веб-баннер ссылки на услуги.php#services1

2-й веб-баннер ссылки на услуги.php#services2

Когда я нажимаю на 1-й веб-баннер в индексе.php, мне нужно только расширить #services1 складной div.

Когда я нажимаю на 2-й веб-баннер в индексе.php, мне нужно только расширить #services2 складной div.

Моя текущая функция Javascript используется для развертывания / сворачивания из кнопок в службах.РНР:

//Bootstrap Collapse Group from within Page

$("[data-collapse-group='servicesgroup']").click(function () {
var $this = $(this);
$("[data-collapse-group='servicesgroup']:not([data-target='" +  
$this.data("target") + "'])").each(function () {
    $($(this).data("target")).removeClass("in").addClass('collapse');
});
});


//Bootstrap Scroll Up

$("div").click(function() {
$('html,body').animate({
    scrollTop: $(".solutions").offset(500).top},
    'slow');
});

Полуфункциональный Javascript для ссылок с другой страницы:

Это единственный Javascript, который я нашел, который, кажется, работает наполовину, потому что, когда я нажимаю на веб-баннер на индексе.php открывает складные div на сервисах.php страница но тогда функция my buttons on services.php не разворачивает и не сворачивает мои divs. Также он открывает все складные дивы, когда мне нужно, чтобы открыть соответствующие складные div (т. е. #services1 или #services2, когда первый или второй веб-баннер на индекс.php нажата)

$(document).ready(function () {

$(".collapse").hide();

$(".solutions").click(function () {

    $(this).next(".collapse").slideToggle(400);
});    

if(window.location.hash && window.location.hash.replace("#", "") == "services1"){
    $('.collapse').show();  
}

});

Я новичок в javascript, поэтому мне понадобится пошаговое объяснение или точная копия и вставка кода, пожалуйста.

Любая помощь ценится.

1 ответ

  1. Спасибо, Иисус!!! После долгих поисков на этом сайте и нескольких сайтах по теме Bootstrap collapse div открытие из внешней ссылки (другой страницы) и поиск результатов не сработало:

    1. Code works for: External Page Link to expand Collapse DIV on another page BUT will NOT hide the Collapse DIV when clicking on
      другие кнопки сворачивания на той же странице:

      $(document).ready(function() {
         $(window.location.hash).show();
      });
      
    2. Код работает для: внешняя страница ссылка, чтобы развернуть свернуть DIV на другой странице и будет скрывать свернуть DIV при нажатии на другие
      кнопки сворачивания. Функция сворачивания других кнопок работает правильно:

      $(document).ready(function() {
         $(window.location.hash).addClass('collapse in');
      });
      
    3. Первый файл (index.php) содержащий несколько ссылок на Collapse DIV Anchors на другой странице:

      LINKED IMAGE: services.php#services1
      LINKED IMAGE: services.php#services2
      LINKED IMAGE: services.php#services3
      
    4. Второй файл (services.php) содержащий Collapse DIVS: services.РНР

      <a href="#services1" data-collapse-group="servicesgroup" data-  
      toggle="collapse" data-target="#services1">
      <div class="button-blue">Learn More</div>
      </a>
      
      <a href="#services2" data-collapse-group="servicesgroup" data-
      toggle="collapse" data-target="#services2">
      <div class="button-blue">Learn More</div>
      </a>
      
      <a href="#services3" data-collapse-group="servicesgroup" data-
      toggle="collapse" data-target="#services2">
      <div class="button-blue">Learn More</div>
      </a>
      
      <div class="solutions">
         <div id="services1" class="collapse" >
           <section> CONTENT </section>
           <section> MORE CONTENT </section>
         </div>
      
         <div id="services2" class="collapse" >
          <section> CONTENT </section>
          <section> MORE CONTENT </section>
         </div>
      
         <div id="services3" class="collapse" >
          <section> CONTENT </section>
          <section> MORE CONTENT </section>
         </div>
      </div>
      
    5. Третий файл (services.js) содержит текущую функцию Javascript, используемую для развертывания / сворачивания из кнопок в службах.РНР:

      //Expand Collapse DIV from External Link and Internal Collapse buttons work
      
      $(document).ready(function() {
        $(window.location.hash).addClass('collapse in');
      });
      
      //Collapse DIV Group from within Page
      
      $("[data-collapse-group='servicesgroup']").click(function () {
      var $this = $(this);
      $("[data-collapse-group='servicesgroup']:not([data-target='" +  
      $this.data("target") + "'])").each(function () {
      $($(this).data("target")).removeClass("in").addClass('collapse');
        });
      });
      
      
      //Scroll Up DIV when clicking on Collapse Button within page
      
      $("div").click(function() {
      $('html,body').animate({
        scrollTop: $(".solutions").offset(500).top},
        'slow');
      });