Loading a tab on button click - javascript

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});

Related

The modal close icon and the text of the modal are incorrect

<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "Kişisel Bilgiler"; } #EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
#EmployeeCardRes.FirstName #EmployeeCardRes.LastName
<div class="text">#Model.FirstName #Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
I want to do like that
You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
#EmployeeCardRes.PositionCode
</div>
<div class="text">
#ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}

Accessibility issue for scrollable content

When the focus is coming on scrollable content all content is announcing without an aria label.
I want to announce only the aria labels when the focus comes on scrollable content.
<div style="height: 100px; width: 500px; overflow: auto;" tabindex="0" aria-label="scroll to content">
<div class="MuiGrid-root-60 MuiGrid-item-62 MuiGrid-grid-xs-12-106 MuiGrid-grid-sm-12-120 MuiGrid-grid-lg-12-148">
<div class="MuiPaper-root-20 MuiCard-root-543 product-box-bundle-card bundle-card multipack-tout horizontal-view MuiPaper-elevation1-24 MuiPaper-rounded-21">
<div class="product-content-wrapper"><button class="MuiButtonBase-root-202 MuiButton-root-175 MuiButton-text-177 media-card-wrapper" tabindex="-1" type="button"><span class="MuiButton-label-176"><img alt="Balaji wafers" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRezk0eYUUz0AnzUUbpx8HGJlSDUADjpix21A&usqp=CAU"></span><span class="MuiTouchRipple-root-277"></span></button>
<div
class="product-information">
<div class="product-heading">Masala Masti Potato Chips</div>
<div class="product-action">
<div class="quantity-count-contain">
<div class="quantity-count-wrapper"><input type="text" id="cartproductListInput10649700" disabled="" tabindex="0" value="5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="MuiGrid-root-60 MuiGrid-item-62 MuiGrid-grid-xs-12-106 MuiGrid-grid-sm-12-120 MuiGrid-grid-lg-12-148">
<div class="MuiPaper-root-20 MuiCard-root-543 product-box-bundle-card bundle-card multipack-tout horizontal-view MuiPaper-elevation1-24 MuiPaper-rounded-21">
<div class="product-content-wrapper"><button class="MuiButtonBase-root-202 MuiButton-root-175 MuiButton-text-177 media-card-wrapper" tabindex="-1" type="button"><span class="MuiButton-label-176"><img alt="Balaji wafers" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRezk0eYUUz0AnzUUbpx8HGJlSDUADjpix21A&usqp=CAU"></span><span class="MuiTouchRipple-root-277"></span></button>
<div
class="product-information">
<div class="product-heading">Masala Masti Potato Chips</div>
<div class="product-action">
<div class="quantity-count-contain">
<div class="quantity-count-wrapper"><input type="text" id="cartproductListInput10649700" disabled="" tabindex="0" value="5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Stacking nested Divs like accordion (without plugin) for dynamic content and varying nested structure

update: made more progress to show all child elements- https://jsfiddle.net/zigzag/jstuq9ok/11/ Now just need to address this for subsecond area to display also. If you now click on Lily, shen and another shen show up but if you now click on shen to drill down, it just hides it. thoughts?
I want to be clear that in this case data is coming from a source system, so we won't want/like to hard code things. That said, here is the structure we want...
Adam
Lily
2.1 Sen
2.1.1 Tank
2.2 Another Sen
Justin
Thanks to online contributing community, I got that far . progress: https://jsfiddle.net/zigzag/jstuq9ok/10/
You will notice that when you click on Lily, you will only see Sen and not the Another Sen. I tried placing markup with 2.2 ahead of 2.1.1 and vice versa but neither worked. I'm sure i'm missing something in jQuery DOM traversal.
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if (Nextrow.hasClass('sub')) { // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function() {
if ($(this).is(':hidden')) {
$('.subsecond').hide();
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
}
}); // toggle this sub row
return false;
}
if (Nextrow.hasClass('subsecond')) { // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});
.pageArea {
background-color: black;
}
.orgChart {
margin: 10px;
padding: 10px;
background-color: gray;
font-family: segoe UI;
color: white;
}
.img_title {
vertical-align: middle;
}
.empDetails {
font-size: 14px;
color: white;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: white;
}
.toggle_class {
text-align: right;
}
.sub {
display: none;
margin-left: 20px;
}
.subsecond {
display: none;
margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pageArea">
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Adam
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Lily
</h4>
<p>
Project Manager
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Other Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart subsecond">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Tank
</h4>
<p>
Designer
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Justin
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
</div>
Your are changing only "next" row. ( $(this).closest('.row').next('.row'); ) I guess you wan`t to target next AND all the siblings rows.
As Temani pointet in his comment would be easier if you make nested divs grouping the rows that should open together.
$('span').click(function(){
$('.sublevel').addClass('toClose');/*close all*/
$(this).next('.sublevel').removeClass('toClose');/*but not the one after this toggler*/
$(this).next('.sublevel').parents('.sublevel').removeClass('toClose');/*and also keep open it's ancestors*/
$('.sublevel.toClose').hide();/*hide ones to close*/
$('.sublevel:not(.toClose)').show();/*show the others*/
$('.sublevel.toClose').removeClass('toClose');/*tidy up*/
}
);
div{padding-left:2rem;}
.sublevel{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
1 Adam
</div>
<div>
2 Lily<span>[toggler]</span>
<div class="sublevel">
<div>
2.1 Sen<span>[toggler]</span>
<div class="sublevel">
2.1.1 Tank
</div>
</div>
<div>
2.2 Another Sen
</div>
</div>
</div>
<div>
3 Justin<span>[toggler]</span>
<div class="sublevel">
<div>
3.1 someone
</div>
<div>
3.2 someother<span>[toggler]</span>
<div class="sublevel">
3.1.1 this one
</div>
</div>
<div>
3.3 someother 2
</div>
<div>
3.4 someother 3
</div>
</div>
</div>

checking id to set value

I'm doing a jeopardy board, and I've given each div (each question square) an id in the index.html so when it's clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used the jquery .is and this if/else statement. I've only done the code for A1 and A2, but while A2 should be worth $200, it's coming back worth $100. Why?
if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}
Thank you in advance. Please let me know if I should include any more code. .well is the div class for the question squares.
Adding html code
<div id="wrapper">
<div class="row">
<div class="title"><h2></h2></div>
<div class="question">
<form> Your Answer:
<input type="text" id="answer" /></form>
<button id="submit">Submit</button>
<p id="instruct">When you're sure about your probably wrong answer, click submit</p>
<!-- <div class = "result"> </div> -->
</div>
</div>
<div class="row">
<div class="well" id="A1"> <p>$100</p> </div>
<div class="well" id="B1"> <p>$100</p> </div>
<div class="well" id="C1"> <p>$100</p> </div>
<div class="well" id="D1"> <p>$100</p> </div>
<div class="well" id="E1"> <p>$100</p> </div>
</div>
<div class="row">
<div class="well" id="A2"> <p>$200</p> </div>
<div class="well" id="B2"> <p>$200</p> </div>
<div class="well" id="C2"> <p>$200</p> </div>
<div class="well" id="D2"> <p>$200</p> </div>
<div class="well" id="E2"> <p>$200</p> </div>
</div>
<div class="row">
<div class="well" id="A3"> <p>$300</p> </div>
<div class="well" id="B3"> <p>$300</p> </div>
<div class="well" id="C3"> <p>$300</p> </div>
<div class="well" id="D3"> <p>$300</p> </div>
<div class="well" id="E3"> <p>$300</p> </div>
</div>
<div class="row">
<div class="well" id="A4"> <p>$400</p> </div>
<div class="well" id="B4"> <p>$400</p> </div>
<div class="well" id="C4"> <p>$400</p> </div>
<div class="well" id="D4"> <p>$400</p> </div>
<div class="well" id="E4"> <p>$400</p> </div>
</div>
<div class="row">
<div class="well" id="A5"><p>$500</p> </div>
<div class="well" id="B5"><p>$500</p> </div>
<div class="well" id="C5"><p>$500</p> </div>
<div class="well" id="D5"><p>$500</p> </div>
<div class="well" id="E5"><p>$500</p> </div>
</div>
<h3> score = </h3>
<div class = "score">0</div>
</div>
And this is how I'm doing each question.
$("#A1").click(function() {
$(".question").show();
$('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
$('#submit').click(function() {
$("#answer").on('input')
var answer = $('#answer').val(); //what does this mean in words?
if
(answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
$('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way
score += questionValue;
$(".score").text("$" + score);
}
else
{
$('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
score -= questionValue;
$(".score").text("$" + score);
}
});
});
Whatever you have implemented so far may be correct but I guess its very difficult to maintain that code. Also for any new person t will be quite uneasy to understand that logic. Please have a look at below approach. You may refer it and take an idea out of it:
$(document).ready(function() {
$(".well").click(function() {
var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
alert(quesVal);
});
});
.questionContainer {
width: 250px;
}
.questionContainer .well {
height: 40px;
width: 40px;
border: 1px solid red;
margin-left: 5px;
margin-top: 5px;
float: left;
/*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
<!--Putting question value in each and every box along with id and class as a data- attribute -->
<div class="well" id="A1" data-questionvalue="100">A1</div>
<div class="well" id="B1" data-questionvalue="100">B1</div>
<div class="well" id="C1" data-questionvalue="100">C1</div>
<div class="well" id="D1" data-questionvalue="100">D1</div>
<div class="well" id="E1" data-questionvalue="100">E1</div>
<div class="well" id="A2" data-questionvalue="200">A2</div>
<div class="well" id="B2" data-questionvalue="200">B2</div>
<div class="well" id="C2" data-questionvalue="200">C2</div>
<div class="well" id="D2" data-questionvalue="200">D2</div>
<div class="well" id="E2" data-questionvalue="200">E2</div>
</div>
You can try this way
$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})
it may be length way but works.
Fiddle test
Simplification (this does not address your particular implementation – but simplifies it in a way that could fix your problem)
You could use classes instead of using specific IDs for each cell, and have 5 of each 1 through 5 and A through E:
<div class="row"> <!-- row 1 -->
<div class="r1 a"></div>
<div class="r1 b"></div>
<!-- blah blah -->
<div class="r5 d"></div>
<div class="r5 e"></div>
</div> <!-- row 5 -->
For reference: I use r as a first letter because you can't start a class name with a number.
Then in your JavaScript:
if($('.well').is('.r1')) questionValue = 100;
and so on.
For reference: You can skip the curlybraces {} in an if statement if the contents are one line (such as in this example).

Click on Current Div to Hide the Others

I'm learning jQuery's hide/show function, and I need to have it so when I click on a div, it shows that div, and hides the other. Right now I have a SUPER janky, and 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 is there a way to do this where it automatically checks which div you clicked on to show it, and to hide the others?
Thanks in advance.
The generic way to do this is to link up the trigger element with its content using data-* attributes, along with giving all content elements a shared class so they can all be 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>
$(".header").click(function() {
//current div
$header = $(this);
//getting the next element
$content = $header.next();
//Hide all other than current div.
$(".header").next().not($content).hide();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.toggle(500, function() {
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Try this
$(document).ready(function(){
$(".show").hide();
$(".Show15").click(function(){
$(".show").show();
});
$(".Show40").click(function(){
$(".show").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>
</div>
<div class="show">
<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></div>
You can create a wrapper function to hide all similar elements using class pattern selectors
Sample Code
$(".buttonText").click(function() {
hideAll();
var _showClass = $(this).attr("class").match(/Show.{2}/).pop();
switch (_showClass) {
case "Show15":
toggleSection("Fifteen", true);
break;
case "Show40":
toggleSection("Fourty", true);
break;
case "Show60":
toggleSection("Sixty", true);
break;
}
});
function toggleSection(group, show) {
var selector = "[class^=" + group + "]";
show ? $(selector).show() : $(selector).hide();
}
Sample Fiddle.
Note: This will hide all similar classes. Eg: toggleSection("Fourty", true) this will hide elements with FourtyInfo, FourtySpecs and Fourty...
If you have such case, I suggest you try something like this:
function toggleSection(group, show) {
var sections = ["Info", "Specs"];
var selector = sections.map(function(k) {
return "." + group + k
}).join();
show ? $(selector).show() : $(selector).hide();
}
This will have more control as you have specified which classes are to be used.
Sample Fiddle
Here is the shortest way .. works for all situations ..
script:
$(document).ready(function(){
// at the start..
$('body').children().first().addClass('show');
$('div').click(function(){
$(this).removeClass('show');
$(this).next().addClass('show');
});
// at the end ..
$('body').children().last().click(function(){
$('body').children().first().addClass('show');
});
});
in ur style add
div{
visibility: hidden;
}
.show{
visibility: visible;
}
Full code and working Demo Here

Categories