Open collapsed container with anchor click

user_16462728 0
Viewed 120

I have the problem, that my closed tab won't open with an anchor click. The anchor itself is in another html file, which is included. A Click on the a-tag of the collapse works just fine and opens the tab but the click on the anchor doesn't do the work.

Collapse Part looks like this:

<div id="details">
  <div class="mobile-collapse-wrapper">
     <div class="mobile-collapse-content-wrapper">

        <div id="mobile-productdetails" class="collapse fade">
           <div class="product-description">
              <div>Description</div>
           </div>
           <div class="row">
              <div class="productview-detail-tab-wrapper">
                 <div class="productview-detail-tab">product details</div>
              </div>

              <div class="col-xs-12 col-sm-8 col-md-8">
                    <div class="short-description">
                       <div>Short description</div>
                    </div>
              </div>
           </div>
        </div>
     </div>

     <div class="mobile-collapse-btn-wrapper" id="mobile-productdetails-jump">

        <div class="mobile-collapse-btn" data-toggle="collapse" data-target="#mobile-productdetails">
            <a data-toggle="collapse" data-target="#mobile-productdetails" data-parent="#details" href="#mobile-productdetails" onclick="return false;">
               <div class="mobile-collapse-collapsed-header">
                  Details
               </div>
               <div class="mobile-collapse-btn-icon">
               </div>
            </a>
        </div>
     </div>
  </div>

My file with my anchor is

<a class="jump-details-link mobile-jump" id="testCollapse" href="#details">
<script type="text/javascript">
$('#testCollapse').click(function(e) {   
    console.log("Function Show Collapse");
    $('#mobile-productdetails').collapse('show');        
});
</script>

my console logging is not returned either. It does nothing. Is it even possible to open contaners of another html file? As I already said it is actually included.

collapse magento-1.9 html jquery
1 Answers

If your #testCollapse is loaded dynamically, try this, or you might have to delegate the click on an element higher in the hierarchy which is present when the page is loaded.

$( "#testCollapse" ).on( "click", function() {
  console.log("Function Show Collapse");
  $('#mobile-productdetails').collapse('show');
});
user_16735360
Related