0

I'd like each signup buttons to link to a different table.

For example, signup button one will link to table 1 (the table already made), then signup button 2 will link to another table that looks like table 1.

In all I'd like for all 4 buttons to link to 4 different tables. As I have very minimal knowledge in coding, I'm having an extremely difficult time doing this.

I'd really, really appreciate any help with this. Thanks.

Link to demo

Kind of what I'm looking for is here

Html:

<!DOCTYPE HTML>    
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/table_style_1.css">
<title>Pricing Table</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

</head>
<body>
<div id="container">    
    <div id="pricing-table">
        <div class="table_2col">
            <div class="caption">
                <ul>

            </div><!--/ column 3-->    
            <div class="clear"></div>   
        </div><!--/. table_3col-->

        <div class="table_4col">
            <div class="caption">
                <ul>
                    <li>&nbsp;</li>
                    <li>Monthly Bandwidth <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
                    <li>Web Storage <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin</span></span></a></li>
                    <li>Email Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief.</span></span></a></li> 
                    <li>Core Features <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin. Lorem Ipsum is not simply random text. It has roots in a classical</span></span></a></li>
                    <li>Custom Domain <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text.</span></span></a></li>
                    <li>Unlimited Support <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a classical Latin</span></span></a></li> 
                    <li>Free T-shirts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief, Lorem Ipsum is not simply random text.</span></span></a></li> 
                    <li>Free Pizza <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief.</span></span></a></li> 
                </ul>
            </div>
            <div class="column_1">
                <ul>
                    <li>
                        <h4>Basic</h4>
                        <strong>FREE</strong>
                    </li>
                    <li>250 GB</li>
                    <li>1 GB</li> 
                    <li>5</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><img src="img/gray_point.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><a href="#" class="pricing-button bronze">Sign Up</a></li>
                </ul>
            </div><!--/ column 1-->
            <div class="column_2">
                <ul>
                    <li>
                        <h4>Standard</h4>
                        <strong>$12 a month</strong>
                    </li>
                    <li>2 TB</li>
                    <li>3 GB</li> 
                    <li>10</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/gray_point.png" alt=""></li>
                    <li>2</li> 
                    <li><img src="img/gray_point.png" alt=""></li> 
                    <li><a href="#" class="pricing-button silver">Sign Up</a></li>
                    </ul>
            </div><!--/ column 2-->
            <div class="column_3">
                <ul>
                    <li>
                        <h4>Professional</h4>
                        <strong>$25 a month</strong>
                    </li>
                    <li>5 TB</li>
                    <li>10 GB</li> 
                    <li>25</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li>5</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><a href="#" class="pricing-button gold">Sign Up</a></li>
                </ul>
            </div><!--/ column 3-->
            <div class="column_4">
                <ul>
                    <li>
                        <h4>Ultimate</h4>
                        <strong>$75 a month</strong>
                    </li>
                    <li>Unlimited</li>
                    <li>1 TB</li> 
                    <li>Unlimited</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li><img src="img/yes.png" alt=""></li>
                    <li>10</li> 
                    <li><img src="img/yes.png" alt=""></li>
                    <li><a href="#" class="pricing-button platinum">Sign Up</a></li>
                </ul>
            </div><!--/ column 4-->
            <div class="clear"></div>       
        </div><!--/. table_4col--> 
    </div><!--/# pricing-table-->
</div><!--/ container-->
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html> 

Css

/* ================ GENERAL STYLES  =============== */  

* {
    margin:0;
    padding:0;  
}

body {
    background:#e4e5e5;
    background: -moz-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -webkit-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -o-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: -ms-radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
    background: radial-gradient(50% 50%, circle, #e4e5e5, #d2d2d2);
} 

#container {
    margin:80px auto;
    width:960px;
}
/* ================= FONT FACE  ================== */   

@font-face {
    font-family: 'RockwellRegular';
    src: url('../fonts/rockwell-webfont.eot');
    src: url('../fonts/rockwell-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rockwell-webfont.woff') format('woff'),
         url('../fonts/rockwell-webfont.ttf') format('truetype'),
         url('../fonts/rockwell-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}   

/* =============== PRICING TABLE  =============== */

#pricing-table {
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: normal;
    color:#787878;
    margin-bottom:3em;
}

#pricing-table .clear {
    clear:both;
} 

/* ---- Lists ---- */

#pricing-table ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#pricing-table ul li {
    margin: 0;
    padding:1.6em 1em;
    list-style-type: none;
}

#pricing-table .caption li {
    padding-left:1.5em;
    height:1em;
    -moz-box-shadow:inset -2px 0 0 #ccc;
    -webkit-box-shadow:inset -2px 0 0 #ccc;
    box-shadow:inset -2px 0 0 #ccc;
}

#pricing-table .caption .header_row {
    height:3.5em;
    padding:2em 0;
    border-bottom:3px solid transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
} 

#pricing-table .caption li.row_style_1 {
    border-top:1px solid #ededed;
    background-color:#dcdcdc;
} 

#pricing-table .caption li.row_style_2 {
    border-top:1px solid #e7e7e7;
    background-color:#d2d2d2;
}

/* =========== COLUMNS  =========== */

#pricing-table .table_2col,
#pricing-table .table_3col,
#pricing-table .table_4col {
    margin-bottom:3em;  
}

/* ---- Tabel 2 col ---- */

#pricing-table .table_2col .caption {
    float:left;
    width:33.3%;
}

#pricing-table .table_2col .column_1,
#pricing-table .table_2col .column_2 {
    text-align:center;
    float:left;
    width:33.3%;
    height:100%;
}

/* ---- Tabel 3 col ---- */

#pricing-table .table_3col .caption {
    float:left;
    width:25%;
} 

#pricing-table .table_3col .column_1,
#pricing-table .table_3col .column_2,
#pricing-table .table_3col .column_3 {
    text-align:center;
    float:left;
    width:25%;
    height:100%;
}

/* ---- Tabel 4 col ---- */

#pricing-table .table_4col .caption {
    float:left;
    width:20%;
} 

#pricing-table .table_4col .column_1,
#pricing-table .table_4col .column_2,
#pricing-table .table_4col .column_3,
#pricing-table .table_4col .column_4 {
    text-align:center;
    float:left;
    width:20%;
    height:100%;
}
#pricing-table .column_1 li:first-child {
    border-left:none;
}

#pricing-table .column_1 li:last-child,
#pricing-table .column_2 li:last-child,
#pricing-table .column_3 li:last-child,
#pricing-table .column_4 li:last-child {
    border-bottom:1px solid #d5d5d5;
}

#pricing-table .column_1 li,
#pricing-table .column_2 li,
#pricing-table .column_3 li,
#pricing-table .column_4 li {
    height:1em;
    border-right:1px solid #e7e7e7;
} 

#pricing-table .column_1 li.header_row,
#pricing-table .column_2 li.header_row,
#pricing-table .column_3 li.header_row,
#pricing-table .column_4 li.header_row {
    border-top:1px solid #282828;
    border-left:1px solid #343434;
    border-right:1px solid #1c1c1c;
    border-bottom:2px solid #121212;
    -moz-box-shadow:inset 0 1px 0 #484848;
    -webkit-box-shadow:inset 0 1px 0 #484848;
    box-shadow:inset 0 1px 0 #484848;
    height:3.5em;
    display:block;
    padding:2em 0;
    text-align:center;
    background:#282828;
}

#pricing-table li.header_row.radius_left {
    -moz-border-radius:5px 0 0 0;
    -webkit-border-radius:5px 0 0;
    border-radius:5px 0 0;
} 

#pricing-table li.header_row.radius_right {
    -moz-border-radius:0 5px 0 0;
    -webkit-border-radius:0 5px 0 0;
    border-radius:0 5px 0 0;
}  

#pricing-table .header_row strong {
    color:#efefef;
    font-size:9px;
}

#pricing-table .row_style_1 {
    background-color:#fff;
    border-top:1px solid #fff;  
}

#pricing-table .row_style_2 {   
    background-color:#f5f5f5;
    border-top:1px solid #f5f5f5;   
}

/* --- columns headings ---  */

#pricing-table .column_1 h4,
#pricing-table .column_2 h4,
#pricing-table .column_3 h4,
#pricing-table .column_4 h4 {
    font-family: 'RockwellRegular';
    font-weight:100;
    font-size:20px;
}

#pricing-table .column_1 h4 {color:#dcd1be;}
#pricing-table .column_2 h4 {color:#e4e4e4;}
#pricing-table .column_3 h4 {color:#dfc491;}
#pricing-table .column_4 h4 {color:#b6d4de;}

/* --- footer row ---  */

#pricing-table .column_1 li.footer_row,
#pricing-table .column_2 li.footer_row,
#pricing-table .column_3 li.footer_row,
#pricing-table .column_4 li.footer_row {
    border:none;
    height:4.2em;
    position:relative;
    margin:0;
    padding:2em 0;  
} 

/* -- buttons --  */

#pricing-table .pricing-button {
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
    text-shadow:0 1px 0 #fff;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
    padding:1.3em 3.5em;    
    font-size:11px;
    color:#636363;
    position:relative;
    behavior:url(js/PIE.htc);
} 

#pricing-table .bronze {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #ede8dd;
    border-top:1px solid #f6f3ed;
    background:#ede8dd;
    background: -ms-linear-gradient(top, #ede8dd, #dcd6cc); /* IE9 */
    background: -moz-linear-gradient(top, #ede8dd, #dcd6cc); /* Firefox */ 
    background: -o-linear-gradient(top, #ede8dd, #dcd6cc); /* Opera 11  */
    background: -webkit-linear-gradient(top, #ede8dd, #dcd6cc); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ede8dd), color-stop(1, #dcd6cc)); /* Chrome 10, Safari */    
}

#pricing-table .silver {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #eeeeee;
    border-top:1px solid #f7f7f7;
    background:#eeeeee;
    background: -ms-linear-gradient(top, #eeeeee, #dbdbdb); /* IE9 */
    background: -moz-linear-gradient(top, #eeeeee, #dbdbdb); /* Firefox */ 
    background: -o-linear-gradient(top, #eeeeee, #dbdbdb); /* Opera 11  */
    background: -webkit-linear-gradient(top, #eeeeee, #dbdbdb); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #dbdbdb)); /* Chrome 10, Safari */
}

#pricing-table .gold {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #f2daab;
    border-top:1px solid #f8eccf;
    background:#f2daab;
    background: -ms-linear-gradient(top, #f2daab, #dfc491); /* IE9 */
    background: -moz-linear-gradient(top, #f2daab, #dfc491); /* Firefox */ 
    background: -o-linear-gradient(top, #f2daab, #dfc491); /* Opera 11  */
    background: -webkit-linear-gradient(top, #f2daab, #dfc491); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2daab), color-stop(1, #dfc491)); /* Chrome 10, Safari */
}

#pricing-table .platinum {
    /* gradient */
    -moz-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    -webkit-box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    box-shadow:0 1px 0 #aaabaa, 0 -1px 0 #d2e7ee;
    border-top:1px solid #e6f3f6;
    background:#d2e7ee;
    background: -ms-linear-gradient(top, #d2e7ee, #bed6de); /* IE9 */
    background: -moz-linear-gradient(top, #d2e7ee, #bed6de); /* Firefox */ 
    background: -o-linear-gradient(top, #d2e7ee, #bed6de); /* Opera 11  */
    background: -webkit-linear-gradient(top, #d2e7ee, #bed6de); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2e7ee), color-stop(1, #bed6de)); /* Chrome 10, Safari */
}

#pricing-table .bronze:hover,
#pricing-table .silver:hover,
#pricing-table .gold:hover,
#pricing-table .platinum:hover {
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
} 

#pricing-table .bronze:hover { background:#dcd6cc;} 
#pricing-table .silver:hover { background:#dbdbdb;}
#pricing-table .gold:hover   { background:#dfc491;}
#pricing-table .platinum:hover { background:#bed6de;}

/* ---- bubble tooltip ----*/

#pricing-table a.tt {
    position:relative;
    z-index:24;
    color: #4B4B4B;
    font-weight:100;
    text-decoration:none;
}

#pricing-table a.tt span { display: none; }
#pricing-table a.tt:hover { z-index:25; color: #aaaaff;}
#pricing-table a.tt:hover span.tooltip {
    display:block;
    position:absolute;
    bottom:0; left:-50px;
    width:200px;
    color: #787878;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}

#pricing-table a.tt:hover span.triangle-obtuse {
    display:block;
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:2px solid #5a8f00;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

#pricing-table a.tt:hover span.triangle-obtuse:before {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:15px 15px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the narrower right-angled triangle */
#pricing-table a.tt:hover span.triangle-obtuse:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:42px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

Javascript:

$(document).ready(function() {

    var columns = $('#pricing-table > div');
        columns.each(function() {
            var target = $(this);
            target.find('li:first-child').addClass('header_row');
        });

    var pt = $('#pricing-table div > div:not(.caption)', this);
        pt.find('ul li:even:not(:last-child):not(:first-child)').addClass('row_style_2');
        pt.find('ul li:odd:not(:last-child):not(:first-child)').addClass('row_style_1');
        pt.find('ul li:last-child').addClass('footer_row');   

        var table_2col = $('#pricing-table .table_2col');   
        var table_3col = $('#pricing-table .table_3col');
        var table_4col = $('#pricing-table .table_4col');

         table_2col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_2col.find('div:nth-child(3) ul li:first-child').addClass('radius_right');

         table_3col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_3col.find('div:nth-child(4) ul li:first-child').addClass('radius_right'); 

         table_4col.find('div:nth-child(2) ul li:nth-child(1)').addClass('radius_left');
         table_4col.find('div:nth-child(5) ul li:first-child').addClass('radius_right'); 

      /* --- Caption addClass --- */
     $('#pricing-table .caption ul li:odd').not(':first-child').addClass('row_style_1'); 
     $('#pricing-table .caption ul li:even').not(':first-child').addClass('row_style_2');   
});
7
  • What should happen once you click the button?
    – Onion
    Mar 12, 2014 at 19:21
  • 1
    Also, why are you not using tables for tabular data? Tables shouldn't be used or layouts, but in your case using tables is acceptable as far as I'm aware.
    – Onion
    Mar 12, 2014 at 19:25
  • Once you click the button it should take you to another table. Mar 12, 2014 at 19:27
  • 1
    Look, this is WAY too much code for a Stack Overflow post. Please pare it down to 10 or fewer relevant lines, 20 tops. Mar 12, 2014 at 19:32
  • Sorry, I didn't know this was a lot of code... I'm pretty much just looking for a table switcher. I've seen them before and it didn't seem like it took much to do. Mar 12, 2014 at 19:39

2 Answers 2

2

JSFIDDLE DEMO

$(document).ready(function(){
    $('#button1').click(function(){
         $("#orginal").css('display','block');
        $("table:nth-child(2)" ).css('display','none');
   });
    $('#button2').click(function(){
        $("#orginal").css('display','none');
        $("table:nth-child(2)" ).css('display','block');
   });
});

is this what you are looking for, because this is sime

0

You can give an id to your <div> (since you are using divs in the markup of fiddle)

and wrap the button in an anchor tag the refers to the corresponding <div> like

<a href="#yourId"><button type="button">Click</button></a>

the page will automatically scroll to the element with id yourId

check this JSFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.