Skip to content

Instantly share code, notes, and snippets.

@wvfitzgerald

wvfitzgerald/content-switcher-example.html

Last active July 23, 2023 22:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wvfitzgerald/0960314ee4ae56f8c82f2fb8c84edea4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wvfitzgerald/0960314ee4ae56f8c82f2fb8c84edea4 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Content Switcher
Raw
content-switcher-example.html
<!-----
Our select options here should have a matching content block below, ex:
value="0" is accompanied by a div wiht the id "data_0"
ADD THIS CSS TO YOUR STyle SHEET:
#content_selector {
margin-bottom: 40px;
}
.hide {
display: none;
}
.toggleShow {
display: block;
}
----->
<select id="content_selector" name="content_options">
<option value="0">Select an option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!------
We can add as many content divs as we like as long as they have a matching option value above.
----->
<div id="data_0" class="hide">
<h3>Default Content</h3>
<p>
Maybe som cool instructions here....
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pellentesque velit. Aliquam rhoncus mi ac felis mattis </p>
</div>
<div id="data_1" class="hide">Div one <p>
Div one Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pellentesque velit. Aliquam rhoncus mi ac felis mattis, vitae scelerisque ante mattis. Sed tincidunt ligula sit amet velit vulputate, quis blandit turpis cursus. Ut aliquam lacinia lorem, at placerat magna accumsan sit amet.
</p></div>
<div id="data_2" class="hide">Div Two<p>
Div Two Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pellentesque velit. Aliquam rhoncus mi ac felis mattis, vitae scelerisque ante mattis. Sed tincidunt ligula sit amet velit vulputate.
</p>
</div>
<div id="data_3" class="hide">Div Three<p>
Div Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pellentesque velit. Aliquam rhoncus mi ac felis mattis, vitae scelerisque ante mattis. Sed tincidunt ligula sit amet velit vulputate.
</p>
</div>
Raw
content-switcher.js
<!-----Requires jQuery----->
$("#content_selector").change(function() {
var id = $(this).val();
$("#data_0" + id).addClass("toggleShow").siblings(".toggleShow").removeClass("toggleShow");
console.log("#data_0" + id);
$("#data_" + id).addClass("toggleShow").siblings(".toggleShow").removeClass("toggleShow");
}).change();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment