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>
    • This topic was modified 7 years, 6 months ago by bcworkz. Reason: code fixed
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You basically are looking for a tabbed page setup, though the arrangement of elements is different. The underlying logic is the same though. You don’t really need the lists to be links, you can assign click event listeners to nearly any element. Links will work too. We usually see setups like this organized as ul/li structures. All the content but the first section is hidden by default with CSS display: none;. When a click occurs on one of the list items, the display none style is applied to all elements as a reset process, then the associated content’s display style is set to block or whatever is appropriate.

    Usually the content all occurs in the same DOM container with a tabbed page concept, but that’s not compatible with your small screen plan, which is essentially accordion content. The concept of click events and display none remains the same, but each content has its own container. If the containers are arranged properly, they can still appear like a tabbed page on large screen views.

    There’s a jQuery UI Accordion module that makes your small screen concept easy to implement. There’s probably something for tabbed pages as well. It might be tricky to get a DOM structure that would work for both modules. Then you manage the behavior by what jQuery module is loaded.

    If a single structure with two modules is proving elusive, I would implement the jQuery accordion setup, then hand code a tabbed page scheme to work with the accordion structure on large screen devices. It seems less complicated to code from scratch.

    When you post code to these forums, please demarcate with backticks or use the code button. If you don’t the forum’s parser corrupts your code so it’s difficult to use in testing or creating working examples. Sometimes it’s not even readable. I fixed your code for you this time ??

    Thread Starter loriswp

    (@loriswp)

    Hi @bcworkz ! Thank you for your well detailed explanation (and to have rearranged my code). So, if I get it right, best would be to implement the jQuery accordion setup first to make it works on mobile, and then use a tabbed function on the page? The jQuery accordion wouldn’t be to hard to implement, but how do I connect its content to the tabs for large screen to have a unique source of content? The client needs to be write its content from WordPress page, he shouldn’t touch any code. I am not sure how to proceed further with that. I am also working on Bootstrap, so, do I have to hide mobile jQuery accordion when large screen is loaded, and hide the tabbed function when mobile screen is loaded? But this would means the client has to write its content twice, no? I don’t know how to start from scratch…

    Moderator bcworkz

    (@bcworkz)

    Yes, starting with small screen layouts and expanding to large is always the way we should be developing any web page. My initial concept was to use the same content and display it differently by CSS media queries and by which jQuery/JavaScript module gets loaded. I don’t know how viable a concept this is, I’ve not used it myself before. It sounds promising at least ??

    The standard accordion structure is an alternating series of headers and divs, all within one large div container, laid out in a single column. For large screens, alter the CSS of the same structure so the headers are stacked on the left and their sub-divs stacked on the right. Come to think of it, the accordion script may still work correctly with this layout. It basically just swaps what div has collapsed and active classes. If it works, that removes the one dicey aspect of this scheme of needing to selectively load different scripts.

    By the chance that accordion cannot be used for the large screen layout, you’d essentially need JS code to do the same class swapping upon certain click events. Divs with collapse class are styled display: none; and those with active class display: block;. If the other CSS is well implemented, it will all work out.

    You certainly want to avoid having two different versions of the same content. As long as the basic content is well structured, it can be parsed into different containers if need be. I’m pretty confident this would not be necessary, the same structure should work for both situations. It’s a matter of the correct CSS.

    As far as the client UI goes, that’s always a problem if they cannot even manage the discipline of consistently alternating header-div tags ( ie most clients ?? ). I know a lot of devs use Advanced Custom Fields for this, breaking up the page content into discrete fields. I’ve personally not used it. It’s a no brainer for a fixed number of fields. I believe it can handle a variable number of pre-defined header-div fields, but I’m not sure. Variable fields can certainly be developed, but it becomes a coding project in itself.

    I don’t always have fully thought out answers, but I’ve no end of half baked ideas ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive show/hide links’ is closed to new replies.