<commit_before># Expandable HTML Envelope Tabs
A set of expandable envelope tabs that are using HTML, CSS, JavaScript and JQuery. This set includes alternating hover effects for the expandable envelope tabs.

### Example:
![alt tag](http://kelly.tech/wp-content/uploads/2016/03/Expandable-tabs.png)

[View Demo](http://www.googledrive.com/host/0B6XoP8y8-xiENEFsbUJUWDNNajg/?utm_source=github&utm_medium=demo&utm_campaign=demoviews) 

### External styling sheets that are needed:
- Get Bootstrap
- Jquery
- Google Font

### Class Styling

```
	.circle { height:20px; width:40px;margin:0px;padding:0px;border-radius:0 0 90px 90px;-moz-border-radius: 0 0 90px 90px;-webkit-border-radius:0 0 90px 90px ;background:#7cc7ff;border-color:#7cc7ff;}
	.container { padding:100px 20px 40px;background-color:#f1f1f1;}
	.hiddenTab { padding:40px;background-color:#7cc7ff;color:#ffffff;display:none}
	.hiddingTabButton { background-color:#ffffff; color:#7cc7ff; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);}
	.visableTab { padding:0px 40px 40px;margin-top:20px;background-color:#5aaafa;margin:0px;border:0px;border-radius: 0px 0px 3px 3px;}
	.visableTabButton { padding:5px 40px;background-color:#ffffff; color:#5aaafa; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);}
```
### How to Change Dynamic Styling With JavaScript

```javascript
function(){
				// Stop All Previous Animations - Important
				$("#show").stop(true,false);
				// Set Tab Background Color
				document.getElementById("boxx1").style.backgroundColor = "#5aaafa";
				// Set Button Tab Background Color
				document.getElementById("button").style.backgroundColor = "#fff";
				// Set Button Tab Color
				document.getElementById("button").style.color = "#5aaafa";<commit_msg>Add CSS Comments<commit_after># Expandable HTML Envelope Tabs
A set of expandable envelope tabs that are using HTML, CSS, JavaScript and JQuery. This set includes alternating hover effects for the expandable envelope tabs.

### Example:
![alt tag](http://kelly.tech/wp-content/uploads/2016/03/Expandable-tabs.png)

[View Demo](http://www.googledrive.com/host/0B6XoP8y8-xiENEFsbUJUWDNNajg/?utm_source=github&utm_medium=demo&utm_campaign=demoviews) 

### External styling sheets that are needed:
- Get Bootstrap
- Jquery
- Google Font

### Class Styling

```
	/* The Half Circle Styling */
	.circle { height:20px; width:40px;margin:0px;padding:0px;border-radius:0 0 90px 90px;-moz-border-radius: 0 0 90px 90px;-webkit-border-radius:0 0 90px 90px ;background:#7cc7ff;border-color:#7cc7ff;}
	/* The Container Styling */
	.container { padding:100px 20px 40px;background-color:#f1f1f1;}
	/* The Hidden Expandable Tab Styling */
	.hiddenTab { padding:40px;background-color:#7cc7ff;color:#ffffff;display:none}
	/* The Hidden Expandable Tab Button Styling */
	.hiddingTabButton {background-color:#ffffff; color:#7cc7ff; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);}
	/* The Visable Tab Styling */
	.visableTab { padding:0px 40px 40px;margin-top:20px;background-color:#5aaafa;margin:0px;border:0px;border-radius: 0px 0px 3px 3px;}
	/* The Visable Tab Button Styling */
	.visableTabButton { padding:5px 40px;background-color:#ffffff; color:#5aaafa; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);}
```
### How to Change Dynamic Styling With JavaScript

```javascript
function(){
				// Stop All Previous Animations - Important
				$("#show").stop(true,false);
				// Set Tab Background Color
				document.getElementById("boxx1").style.backgroundColor = "#5aaafa";
				// Set Button Tab Background Color
				document.getElementById("button").style.backgroundColor = "#fff";
				// Set Button Tab Color
				document.getElementById("button").style.color = "#5aaafa";
{'fraction_non_alphanumeric': 0.14595375722543352, 'fraction_numerical': 0.06551059730250482, 'mean_word_length': 5.26395173453997, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3239050', 'n_tokens_mistral': 1768, 'n_tokens_neox': 1473, 'n_words': 326}