Show content only from the clicked link and hide all siblings

Question

as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu. What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names. I tried doing something myself but I'm probably missing something.. Any assistance would be appriciated

I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/

HTML:

<div id="header">
   <div id="menuBlock">
    <ul id="menu">
      <li><a href="#novosti" name="sekcija1">Novosti</a></li>
      <li><a href="#programMladi" name="sekcija2">Program Mladi</a></li>
      <li><a href="#programOdrasli" name="sekcija3">Program Odrasli</a></li>
      <li><a href="#programUpisi" name="sekcija4">Program Upisi</a></li>
      <li><a href="#galerija" name="sekcija5">Galerija</a></li>
      <li><a href="#kontakt" name="sekcija6">Kontakt</a></li>
    </ul>
  </div>
</div>

<body>
  <div id="main">
    <div id="novosti" name="sekcija1" class="sekcija">
      aaaa
    </div>
    <div id="programMladi" name="sekcija2" class="sekcija">
      aaaa
    </div>
    <div id="programOdrasli" name="sekcija3" class="sekcija">
      aaaa
    </div>
    <div id="programUpisi" name="sekcija4" class="sekcija">
      aaa
    </div>
    <div id="galerija" name="sekcija5" class="sekcija">
      aaaa
    </div>
    <div id="kontakt" name="sekcija6" class="sekcija">
      aaa
    </div>
  </div>
</body>

Javascript:

$(document).ready(function() {
  $("#menu").click(function(e) {
    var selected = this.attr('href');
    $('#main' + selected).show('slow').siblings().hide('slow');
  });
});

EDITED: Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).

UPDATE: In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.

In that case my javascript looked like this.

$(document).ready(function(){
    $("#menuBlock div ul li a").click(function (e){
        e.preventDefault();
        var selected = $(this).attr('href');
        $( selected ).fadeIn('slow').siblings().hide();
        });
    });

Thanks a lot people. Thanks for showing me the mistakes i made. But now i have another problem. It works great on fiddle, but when i implement it on the local page it doesnt seem to do anything but move to the href position. — Ivan Horvatin, Mar 04 '16 at 13:29
I am also using slicknav plugin, maybe it is causing some problems? Its a bit tedious to uploud the whole thing atm, but i will do it in the evening — Ivan Horvatin, Mar 04 '16 at 13:30
Or should i make an entirely different question for that as it seems anyone who wants to something like this with slicknav might ask. — Ivan Horvatin, Mar 04 '16 at 14:10

gurvinder372 · Accepted Answer · 2016-03-04T12:49:20.793

2

There should a space between 2 selectors if they have a parent child relationship, so change this line

$('#main' + selected).show('slow').siblings().hide('slow');

to

$('#main ' + selected).show('slow').siblings().hide('slow');

or simply the selected one (since it is already pointing to a specific element)

$(selected).show('slow').siblings().hide('slow');

check this updated fiddle

$(document).ready(function(){
    $("#menu li a").click(function (e){ //bind the event on `a` rather than ul
        var selected = $(this).attr('href'); //use $(this) instead of this
        $( selected ).show('slow').siblings().hide('slow'); //explained above
    });
});

edited Mar 04 '16 at 12:49

answered Mar 04 '16 at 12:43

gurvinder372

66,980
10
72
94

Thanks for the info. I added an update, can you give a comment on that? Is there a simpler way of doing it, then the way i did? And is this the right way of doing it if i want to change as less amount of code as possible, but simply adding content to the same page? – Ivan Horvatin Mar 04 '16 at 14:43

score 2 · Answer 2 · answered Mar 04 '16 at 12:44

2

There are more than one errors found in your code,

set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.

Try,

$(document).ready(function() {
  $("#menu li a").click(function(e) {
    e.preventDefault()
    var selected = $(this).attr('href');
    $('#main ' + selected).stop().show('slow').siblings().hide('slow');
  });
});

DEMO

answered Mar 04 '16 at 12:44

Rajaprabhu Aravindasamy

66,513
17
101
130

Thanks for showing me my mistakes. Copy/pasting made me hasty and missed on some of them. What is the difference between your's and @gurvinder372 answer? I see he only used selected in the last part. – Ivan Horvatin Mar 04 '16 at 14:45

score 1 · Answer 3 · answered Mar 04 '16 at 12:46

1

Try this method

$(document).ready(function() {
  $("#menu a").click(function(e) {
    debugger;
    var selected = $(this).attr('name');
    $('#main div').hide(); 
    $('#main div[name="'+selected+'"]').show('slow');
  });
});

answered Mar 04 '16 at 12:46

Muhammad Atif

1,050
1
9
21

score 1 · Answer 4 · answered Mar 04 '16 at 13:20

You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach

$(document).ready(function(){
  $("#menu").click(function (e){

    var element = $(e.target).attr('href');

    $('#main-divs > ' + element).show('slow').siblings().hide('slow');
  });
});

Show content only from the clicked link and hide all siblings

4 Answers4

DEMO