i'm learning jquery's hide/show function, , need have when click on div, shows div, , hides other. right have super janky, , super inefficient way of doing it:
$(document).ready(function(){ $(".fifteeninfo").hide(); $(".fourtyinfo").hide(); $(".sixtyinfo").hide(); $(".fifteenspecs").hide(); $(".fourtyspecs").hide(); $(".sixtyspecs").hide(); $(".show15").click(function(){ $(".fifteeninfo").show(); $(".fifteenspecs").show(); $(".fourtyspecs").hide(); $(".sixtyspecs").hide(); $(".fourtyinfo").hide(); $(".sixtyinfo").hide(); }); }); my html:
<div class="buttons"> <button class="buttontext show15" width="200" height="300">dsl 6</button> <button class="buttontext show40" width="200" height="300">dsl 10</button> <button class="buttontext show60" width="200" height="300">dsl 15</button> <button class="buttontext show40" width="200" height="300">dsl 25</button> <button class="buttontext show60" width="200" height="300">dsl 50</button> </div> <div class="fifteeninfo border"> <h1 class="package">dsl 6</h1> <div class="cablespacer"></div> <h3 class="monthlyprice">\$29.99</h3> <div class="cablespacer"></div> <h3 class="differentbandwidth">\$39.99 unlimited</h3> </div> <div class="fifteenspecs"> <div class="monthlyusage"> <h3 style="text-align: center;">usage</h3> <h1 class="usage">150</h1> <p class="gigabyte">gb</p> </div> <div class="download"> <h3 style="text-align: center;">download</h3> <h1 class="usage" style="text-align: center;">6</h1> <p class="megabyte">mbps</p> </div> <div class="upload"> <h3 style="text-align: center;">upload</h3> <h1 class="usage" style="text-align: center;">800</h1> <p class="megabyte">kbps</p> </div> <div class="ordernow"> <button class="btn btntruespeed orderbutton">order now!</button> </div> </div> <div class="fourtyinfo border"> <h1 class="package">dsl 10</h1> <div class="cablespacer"></div> <h3 class="monthlyprice">\$29.99</h3> <div class="cablespacer"></div> <h3 class="differentbandwidth">\$44.99 unlimited</h3> </div> <div class="fourtyspecs"> <div class="monthlyusage"> <h3 style="text-align: center;">usage</h3> <h1 class="usage">150</h1> <p class="gigabyte">gb</p> </div> <div class="download"> <h3 style="text-align: center;">download</h3> <h1 class="usage" style="text-align: center;">10</h1> <p class="megabyte">mbps</p> </div> <div class="upload"> <h3 style="text-align: center;">upload</h3> <h1 class="usage" style="text-align: center;">1</h1> <p class="megabyte">mbps</p> </div> <div class="ordernow"> <button class="btn btntruespeed orderbutton">order now!</button> </div> </div> so there way automatically checks div clicked on show it, , hide others?
thanks in advance.
the generic way link trigger element content using data-* attributes, along giving content elements shared class can hidden in one.
$('.content').hide(); $('.btn').click(function(){ $('.content').hide() var target = $(this).data("target"); $(target).show(); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn" data-target="#content1">show 1</button> <button class="btn" data-target="#content2">show 2</button> <div id="content1" class="content">content 1</div> <div id="content2" class="content">content 2</div>
Comments
Post a Comment