CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4796879
user4796879

Reputation:

jquery toggle <td> on click of a button

I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.

my HTML table is below 

<table id="menu_breads">
    <thead>
        <tr>
            <th colspan="2">BREADS</th>
        </tr>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Portugese Rolls
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R1.49</td>
        </tr>
        <tr>
            <td colspan="2" class="more">A hand made selection of Portugese rolls</td>
        </tr>
        <tr>
            <td>Hotdog Buns
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R0.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Hotdog buns</td>
            </tr>
        </tr>
        <tr>
            <td>French Loaf
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R3.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of French loaves</td>
            </tr>
        </tr>
        <tr>
            <td>Sead Roll
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Seed Rolls</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
    <thead>
        <tr>
            <th colspan="2">CONFECTIONARIES</th>
        </tr>
        <tr>
            <th>ITEM (per slice)</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cream Slice
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R12.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Cream slices</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Cake
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R15.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
            </tr>
        </tr>
        <tr>
            <td>Coconut Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R4.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>

My CSS is here 

.myButton {
    background: #183C4C;
    border-radius: 31%;
    border:2px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    width: 15%;
    float: right;
}

.more {
    display: none;
    }

Demo

and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?

I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.

$(document).ready(function(){

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();

    if ($(this).closest('tr').is(":visible")) {
                $(this).html("&#x2C4")
        }
        else { 
            $(this).html("&#x2C5")
        }
});

});

Upvotes: 1

Views: 4776

Answers (3)

Mathew Thompson
Mathew Thompson

Reputation: 56429

You wouldn't have to give IDs to every td, that'd be overkill. You want something dynamic. Assuming that your HTML structure will stay the same, you can do:

EDIT: Added the ability to toggle plus and minus icons from comments

$(".myButton").on("click", function () {
    var more = $(this).closest("tr").next("tr").find(".more");
    more.toggle();

    if (more.is(":visible")) {
       //show minus icon, hide plus
    }
    else {
       //show plus icon, hide minus
    }
});

DEMO (thanks Rory)

Upvotes: 5

ImreNagy
ImreNagy

Reputation: 511

Have you tried this: 

$(".myButton").on("click",function() {
   $(this).closest("tr").toggle();
})

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The more should be given to the tr - also your markup is not valid(you have a tr as child of tr - the more tr is child of the button tr)

    <tr>
        <td>Portugese Rolls
            <button class="myButton">&#x2C5</button>
        </td>
        <td>R1.49</td>
    </tr>
    <tr class="more">
        <td colspan="2">A hand made selection of Portugese rolls</td>
    </tr>

then

$('.myButton').click(function(){
    $(this).closest('tr').next().toggle();
})

Demo: Fiddle

If you don't want to change anything

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();
})

Demo: Fiddle

Upvotes: 1

Related Questions