Responsive show/hide links
-
I would like to have a list of show/hide links that show divs occupying the same space, and able to be responsive. My list appear on left and show content on right. The idea is that when I click on Link 1, then content #1 will show up, and when I click on Link 2, then content #1 will disappear and content #2 will take it’s place.
When loading the page on small and mobile screen, I would like to get content #1 showing up under Link 1 when clicking on it, and content 1 pushs link 2 down. And so on, content #2 showing up under Link 2, and pushs link 3 down…
I am working on WordPress and Bootstrap, using my own theme. I don’t reject to use .php file to achieve that. So far, I have tried this in html, css and js. Since I got stuck trying to get this reponsive, I am open to get a diffent method if necessary. But I would like to be able to fill the content and links name from WordPress.
Thank you for your help!
Here is my current code
JAVASCRIPT:$(function () { $("a[id^='link']").click(function (e) { e.preventDefault(); var index = this.id.replace("link", ""); $(".panel").hide(); $("#panel" + index).show(); }); });
CSS:
.side-nav { font-size: calc(18px + 3vw); } .panel { font-size: calc(18px + 1vw); display: none; position:absolute; top: 0px; right: 0px; width: 70%; }
HTML :
<div id="side-nav-container"> <div class="side-nav"> <a href="# ">Link 1</a> <a href="# ">Link 2>/a> </div> <div id="side-nav-content"> <div id="panel1 " class="panel ">Content 1</div> <div id="panel2 " class="panel ">Content 2</div> </div> </div>
- The topic ‘Responsive show/hide links’ is closed to new replies.