CODEWITHSUNDEEP
javascriptjqueryhtml
Calvin Ananda
Calvin Ananda

Reputation: 1530

Display content from DIV

I have the two text button Main Folder & Second Folder using the <a> tag inside the div element.

<div class="zf-folder">
   <!-- another div elements -->
      <a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">Main Folder</a>
   <!-- another div elements -->
</div>

Unfortunately, I have to click the text to move tabs, can't use the button (div) column to display the content.

How can I display tab content not only from text, but can from clicking on div element.

Please help me, I give a lot of code on JSFiddle.

Thanks in advance

$(document).ready(function() {
  $('table.table').DataTable();
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
  });
});
._tabFolder {
  cursor: pointer;
  position: relative;
}

._tabFolder:hover {
  background-color: rgba(255, 255, 255, 0.2)
}

._tabFolder:active {
  background-color: rgba(29, 33, 41, 1)
}

._itemPosition {
  align-items: center;
  display: flex
}

._sideFolder {
  background-color: none;
  height: 90%;
  left: 0;
  position: absolute;
  top: 2px;
  width: 5px
}



._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
  display: block
}

._iconText {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-left: 13px;
}

._iconFolder,
._1i5x,
._1i5w {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle
}

._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -437px -21px;
  height: 24px;
  position: relative;
  width: 24px
}

._5bme ._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -412px -21px
}

._icon-col {
  height: 16px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 16px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="column-folder">
  <ul class="nav nav-tabs" role="tablist">
  
<!-- *********** MAIN FOLDER BUTTON ************* -->
    <div class="zf-folder">
      <li role="presentation" class="active">
        <div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
          <div class="_sideFolder"></div>
          <div class="_iconText" style="width: 215px">
            <div class="ellipsis">
              <div class="_iconFolder">
                <div class="_icon-col">
                </div>
              </div>
              <a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">Main Folder</a>
            </div>
          </div>
        </div>
      </li>
    </div>
<!-- *********** MAIN FOLDER BUTTON  ************* -->
    
    
<!-- *********** SECOND FOLDER BUTTON  ************* -->    
    <div class="zf-folder">
      <li role="presentation" class="active">
        <div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
          <div class="_sideFolder"></div>
          <div class="_iconText" style="width: 215px">
            <div class="ellipsis">
              <div class="_iconFolder">
                <div class="_icon-col">
                </div>
              </div>
              <a href="#example1-tab2" aria-controls="example1-tab2" role="tab" data-toggle="tab">Second Folder</a>
            </div>
          </div>
        </div>
      </li>
    </div>
<!-- *********** SECOND FOLDER BUTTON  ************* -->
    
  </ul>
</div> <!-- Zf-Folder -->


<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="mainTab">

    <div class="row">
      <div class="col-md-6">
        <h3>Main Folder</h3>

      </div>
    </div>

    <div class="table-responsive">
      <table id="pendingOffTable" class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Leave Type</th>
            <th>Remarks</th>
            <th>Status</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="off : ${pendingOffList}">
            <td data-th-text="${off.user.name}">...</td>
            <td data-th-text="${off.startDate}">...</td>
            <td data-th-text="${off.endDate}">...</td>
            <td data-th-text="${off.leaveType}">...</td>
            <td data-th-text="${off.remarks}">...</td>
            <td data-th-text="${off.status}">...</td>
            <td>
              <input hidden="hidden" name="offId" th:value="${off.id}" />
              <button th:id="${off.id}" class="btn btn-success btn-xs approve-off" type="submit" value="approve">
                <span class="fa fa-check-square-o"></span> Approve
              </button>
              <button th:id="${off.id}" class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
                <span class="fa fa-times"></span> Reject
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div role="tabpanel" class="tab-pane fade in" id="example1-tab2">

    <div class="row">
      <div class="col-md-6">
        <h3>Second Folder</h3>

      </div>
    </div>

    <div class="table-responsive">
      <table id="approvedOffTable" class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Leave Type</th>
            <th>Remarks</th>
            <th>Status</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="off : ${approvedOffList}">
            <td data-th-text="${off.user.name}">...</td>
            <td data-th-text="${off.startDate}">...</td>
            <td data-th-text="${off.endDate}">...</td>
            <td data-th-text="${off.leaveType}">...</td>
            <td data-th-text="${off.remarks}">...</td>
            <td data-th-text="${off.status}">...</td>
            <td>
              <input hidden="hidden" name="offId" th:value="${off.id}" />
              <button th:id="${off.id}" class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
                <span class="fa fa-times"></span> Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Upvotes: 0

Views: 86

Answers (2)

Zvezdas1989
Zvezdas1989

Reputation: 1465

This should work for you. Just add these lines to your JS:

$(".mainFolder").click(function (e) {
    $(this).find("a")[0].click();
});

$(".secondFolder").click(function (e) {
    $(this).find("a")[0].click();
});

Working JSFiddle https://jsfiddle.net/Karadjordje1389/h14uv4ww/

Upvotes: 1

Andrej Ch
Andrej Ch

Reputation: 68

You can add a span inside your link:

<a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">
   Main Folder
      <span class="hyperspan"></span>
</a>

And CSS:

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

Upvotes: 2

Related Questions