I've set up a dropdown menu with separate iframes for each option. Here's the code I used:
$(function(){
$('#klanten-lijst').on('change',function(){
$('#klanten div').hide();
$('.klant-'+this.value).show();
});
});.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 520px;
}
...<div>
<h2 style="margin: 0 0 20px">Clients</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="clients" id="klanten-list">
... (list of clients)
</select>
<div id="klanten">
... (iframes for each client with links)
</div>
<script src="../scripts/client-reveal.js"></script>
</div>
</div>I'm having trouble getting it to work and it's been frustrating me for some time now.
What's interesting is that when I manually change "hidden" to "show" using the browser console (F12), the frame appears on hover, but not its content. So I'm lost as to what might be causing the issue!
Any help would be appreciated, Roel