html 隐藏显示多个Div

Posted 2021-05-10

http://jsbin.com/guhusawuya/edit?html,css,output

Note title will be:  
title="prop1", title="prop2", title="prop3", ... 

The content to be toggled with divs:  id="prop1",  id="prop2", id="prop3"
<div id="prop{{ $property->id }}" class="row showbox" style="display:none;">
    your content goes here  
</div>




            @forelse( $properties as $property )
            <div class="col-md-10 col-md-offset-1">

      <div class="row title_bar">
          <div class="col-md-6">{{ $property->name }} | {{ $property->location  }}</div>
          @auth
              <div class="col-md-6 text-right open" title="prop{{ $property->id }}"><a href="#">More Details</a></div>
          @endauth
          
      </div>

      <div class="row top_info">
          <div class="col-md-6">{{ $property->sqft }} sqft / {{ $property->property_type }}</div>
          <div class="col-md-6 text-right">Date Acquired: {{ $property->purchase_date }}</div>
      </div>

      <div class="row info">
          <div class="col-md-3">
              <img src="{{ asset("properties/$property->image") }}">
          </div>

          <div class="col-md-9">
              <p>{!! $property->content !!}</p>
          </div>
      </div>

  
  @auth
      <div id="prop{{ $property->id }}" class="row showbox" style="display:none;">
          <div class="col-md-4">
              <div class="panel panel-info">
                  <div class="panel-heading">
                      Acquisition
                  </div>

                  <div class="panel-body">
                      <ul>
                          <li>Purch Date: {{  $property->purchase_date }}</li>
                          <li>Purch Price: {{  $property->purchase_price }}</li>
                          <li>Occupancy: {{  $property->occupancy }}</li>
                      </ul>
                  </div>
              </div>        
          </div>

          <div class="col-md-4">
              <div class="panel panel-info">
                  <div class="panel-heading">
                      Returns
                  </div>
                  <div class="panel-body">
                      <ul>
                          <li>{{ $property->irr }} IRR</li>
                          <li>{{ $property->equity_multiple }} Equity Multiple</li>
                          <li>{{ $property->average_cash }} Average Cash on Cash</li>
                      </ul>
                  </div>
              </div>    
          </div>

          <div class="col-md-4">
              <div class="panel panel-info">
                  <div class="panel-heading">
                      Capital
                  </div>
                  <div class="panel-body">
                      <ul>
                          <li>Fund Inv: {{ $property->fund_inv }}</li>
                          <li>Co-Inv {{ $property->co_inv }}</li>
                          <li>Debt: {{ $property->debt }}</li>
                      </ul>
                  </div>
              </div>    
          </div>
      </div>
  @endauth

</div> 
@empty
  <div><p>No Properties Found</p></div>
@endforelse




<script>
  
$(document).ready(function(){
    
    $('.open').click(function(e) {
        e.preventDefault() ;
        // get title attribute
        id = $(this).attr('title');

        if($(this).text() == 'Less Details')  {
            $(this).html('<a href="#">More Details</a>');
        }
        else  {
            $(this).html('<a href="#">Less Details</a>');
        }
        $("#"+id).slideToggle('slow');
   });
});  
  
</script>