Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Help with CSS/HTML

Options
  • 04-05-2008 3:06am
    #1
    Xylophonic
    Closed Accounts Posts: 364 ✭✭


    Hi,

    I am looking for help with showing and hiding tables. Essentialy I want it so that it will display the row headers and then you can choose to show or hide the table? Is this possible, I was looking on google and I can't really follow the javascript's and I'd preferably like to do it using CSS & HTML, if that is possible.

    Would anyone be able to help?

    Regards,
    Darren


Comments

  • Options
    #2
    aidan_walsh
    Closed Accounts Posts: 17,208 ✭✭✭✭aidan_walsh


    IF you're looking to do it dynamically without a page refresh, then you need to use JS like JQuery. Other than that, you could use check boxes to allow the user to select what items they want shown and process inline CSS on the server to hide the other items.


  • Options
    #3
    Xylophonic
    Closed Accounts Posts: 364 ✭✭Xylophonic


    aidan_walsh wrote: »
    IF you're looking to do it dynamically without a page refresh, then you need to use JS like JQuery. Other than that, you could use check boxes to allow the user to select what items they want shown and process inline CSS on the server to hide the other items.

    Well I'd like to use the inline CSS method I guess! How would I go about doing that?


  • Options
    #4
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    The CSS:

    .hiddenTable {
    display:none
    }


    The HTML:

    <div>
    <h1 class="clickHeader">The Header Item to Be Clicked On</h1>
    <table class="hiddenTable">......</table>
    </div>

    The jQuery:

    $(document).ready(function() {
    $(".clickHeader").click(function() {
    $(this).parentNode.find("table").removeClass("hiddenTable");
    });
    });

    It's a Bank Hol Sunday, so I know there's probably some few minor issues with that, but that's the gist of it anyway.....


  • Options
    #5
    Xylophonic
    Closed Accounts Posts: 364 ✭✭Xylophonic


    Liam Byrne wrote: »
    The CSS:

    .hiddenTable {
    display:none
    }


    The HTML:

    <div>
    <h1 class="clickHeader">The Header Item to Be Clicked On</h1>
    <table class="hiddenTable">......</table>
    </div>

    The jQuery:

    $(document).ready(function() {
    $(".clickHeader").click(function() {
    $(this).parentNode.find("table").removeClass("hiddenTable");
    });
    });

    It's a Bank Hol Sunday, so I know there's probably some few minor issues with that, but that's the gist of it anyway.....

    Cool, Thanks!
    The jQuery:

    $(document).ready(function() {
    $(".clickHeader").click(function() {
    $(this).parentNode.find("table").removeClass("hiddenTable");
    });
    });

    It's a Bank Hol Sunday, so I know there's probably some few minor issues with that, but that's the gist of it anyway.....

    Edit: Where do I put the jQuery? I just put it in the <head> tags


Advertisement