CODEWITHSUNDEEP
css
philbass44
philbass44

Reputation: 33

I've added a button and I want it to display a table underneath when clicked

I've got a bit lost with where I am with this, I've added a button and have the table done and hidden from view. All I need now is for it to display when the button is clicked. I know it's an easy one but my brain has faded.

Here's the html:

<div class="lotteryresults">

<button class="button button5"><b>+</b></button>
<h2>December</h2>
<p2>A responsive table will display a horizontal scroll bar   if           the       screen is too 
small to display the full content. Resize the browser window to see    the effect:</p2>

<div class="button5-content">
<div style="overflow-x:auto;">
<table>

<tr>
  <td>£1000</td>
  <td>£75</td>
  <td>£50</td>
  <td>£25</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
  <td>£10</td>
</tr>
<tr>
  <td>11533</td>
  <td>22978</td>
  <td>12456</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
  <td>67849</td>
 </tr>

</table>
</div>
</div></div>

And here's the CSS:

  .button {
background-color: #434343; 
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
float: right;
}
.button5 {border-radius: 80%;size: 60px;}
.button:active {
 background-color: #a1a0a0;
 box-shadow: 0 5px #666;
 transform: translateY(4px);
 }

table {
border-collapse: collapse;
width: 100%;
max-width: 1000px;margin:auto;border: 1px solid white;
}

th, td { margin:auto;
text-align: left;
padding: 6px;border: 2px solid #dadada;
}
p2 {font-family: source sans pro;padding-left:15px;padding-top: -20px;}

h2 {font-family: 
source sans pro;fontsize:45px;paddingleft:15px;color:purple;}

tr:nth-child(even){background-color: #b4b4b4;
margin:auto;align:center;font-family: source sans pro;}

tr:nth-child(odd){background-color: #7a7a7a;
font-family: source sans pro;font-weight:bold;}

.lotteryresults {background-color: #dadada;
width:100%;max-width:1200px;margin:auto;}

.button5-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 1000px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.button5:hover .button5-content {
display: block;
}

Upvotes: 1

Views: 93

Answers (2)

pradeep1991singh
pradeep1991singh

Reputation: 8365

You can achieve this using

  • checkbox and label
  • and can position them as that checkbox will not be visible but only label is visible by using position: absolute.

Somthing like below

.button {
  background-color: #434343; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  float: right;
}
.button5 {border-radius: 80%;size: 60px;}
.button:active {
  background-color: #a1a0a0;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 1000px;margin:auto;border: 1px solid white;
}

th, td { margin:auto;
  text-align: left;
  padding: 6px;border: 2px solid #dadada;
}
p2 {font-family: source sans pro;padding-left:15px;padding-top: -20px;}

h2 {font-family: 
  source sans pro;fontsize:45px;paddingleft:15px;color:purple;}

tr:nth-child(even){background-color: #b4b4b4;
  margin:auto;align:center;font-family: source sans pro;}

tr:nth-child(odd){background-color: #7a7a7a;
  font-family: source sans pro;font-weight:bold;}

.lotteryresults {background-color: #dadada;
  width:100%;max-width:1200px;margin:auto;}

.button5-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 1000px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display:block;
  background: #08C;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: white;
  font-weight: bold;
}

input[type=checkbox]:checked ~ .button5-content {
  display: block;
}


input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label {
	display: block;
	background: #08C;
	padding: 5px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 2px;
	color: white;
	font-weight: bold;
}

input[type=checkbox]:checked ~ .to-be-changed {
	color: red;
}
<div class="lotteryresults">

  <label class="button button5" for="toggle">+</label>
  <input class="button" type="checkbox" id="toggle">

  <!-- <button class="button button5"><b>+</b></button> -->
  <h2>December</h2>
  <p2>A responsive table will display a horizontal scroll bar   if           the       screen is too 
    small to display the full content. Resize the browser window to see    the effect:</p2>

  <div class="button5-content">
    <div style="overflow-x:auto;">
      <table>

        <tr>
          <td>£1000</td>
          <td>£75</td>
          <td>£50</td>
          <td>£25</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
          <td>£10</td>
        </tr>
        <tr>
          <td>11533</td>
          <td>22978</td>
          <td>12456</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
          <td>67849</td>
        </tr>

      </table>
    </div>
  </div></div>

Hope this will help you in some way (y).

For reference check this article - http://tympanus.net/codrops/2012/12/17/css-click-events/

Upvotes: 2

PhpDude
PhpDude

Reputation: 1598

This will get you started:

<span class="div1" tabindex="0">Hide Me</span>
<span class="div2" tabindex="0">Show Me</span>


body {
  display: block;
}
.div1:focus ~ .showMe {
  display: none;
}
.div2:focus ~ .showMe {
  display: block;
}

<p class="showMe" >Show and hide me</p>

Upvotes: 1

Related Questions