Dropdown within table (CSS/HTML/Java)

Question

I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.

I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.

I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.

The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):

may be you have to learn around tooltip concept, there is différents add on on differents forms, some of them are not really bubbles an must match your need. see on google image to check their look — Mister Jojo
– Mister Jojo, Commented Dec 2, 2018 at 13:39

Oliver Trampleasure · Accepted Answer · 2018-12-02 15:13:03Z

1

Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...

I'd advise working on the user experience a little, but the basic mechanics are there.

$( document ).ready(function() {

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

        // Show .description if hidden, hide if currently showing
        $(this).closest("td").find(".description").toggle();

        // A little bit of styling to show the user the content has been expanded
        if ( $(this).hasClass("blue-text") ) {
           $(this).removeClass("blue-text");
        } else {    
          $(this).addClass("blue-text");
        }
    
    });

});

.description {
  display:none;
}

.blue-text {
  color: blue;
}

table {
  font-family: arial, sans-serif;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding-top: 50px
}

td,
th {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding: 8px;
}

th {
  font-weight: normal;
  background-color: rgba(222, 222, 222, 0.6)
}

.modules th {}

tr:hover {
  background-color: rgba(20, 91, 130, 0.3)
}

}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Module ID</th>
    <th width="70%">Module</th>
    <th>Credits</th>
    <th>Semester</th>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
        <p>Introduction to CS <span class="expand">&#9660;</span></p>
        <p class="description">
           Some extra info here.
        </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
        <p>Introduction to Uni <span class="expand">&#9660;</span></p>
        <p class="description">
          Some extra info here.
        </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to German</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>

</table>

edited Dec 2, 2018 at 15:13

answered Dec 2, 2018 at 14:53

Oliver Trampleasure

3,3031 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hektor Over a year ago

That code needed re-ordering in my browser to put the script after the html table elements and the jquery.js import, otherwise great answer.

Oliver Trampleasure Over a year ago

Thanks, I've added $( document ).ready(); to the script so it waits until the table loads before trying to add any click events.

philcode101 Over a year ago

this is absolutely perfect, and so close to what I almost did!

Collectives™ on Stack Overflow

Dropdown within table (CSS/HTML/Java)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related