user7186935 user7186935 - 17 days ago 5
HTML Question

Jquery specific id article content does not show

My plan:

A menu-items (hooked to articles within my content division). Initially all the articles are hidden. But when a menu-item is selected, the content-division should show only the article corresponding with the hit menu-item. Same story for the other menu-items.

I am new to JS. I cannot figure out why the separate articles won't show. The first function of hiding everything initially works though.

my html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>

<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts.js" type='text/javascript'></script>
</head>

<body>
<div id="wrapper">
<header id="titel">
<h1>Heartmeasurement</h1>
</header>

<!-- Menu -->
<nav id="menu">
<ul>
<li><a href="#menu_a">Introduction</a></li>
<li><a href="#menu_b">The Problem</a></li>
<li><a href="#menu_c">The Manual</a></li>
<li><a href="#menu_c">Measuring the heart</a></li>
</ul>
</nav>

<!-- The Articles -->
<div id="content">
<!-- Intro Article -->
<article id="menu_a">
<h2>Introduction</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro img"/>
</figure>
<p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p>
</article>

<!-- Article 1 -->
<article id="menu_b">
<h2>The Problem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="First img"/>
</figure>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p>
</article>

<!-- Article 2 -->
<article id="menu_c">
<h2>The Manual</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Second Article"/>
</figure>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p>
</article>

<!-- Article 3 -->
<article id="menu_d">
<h2>Measuring Your Heart</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Third img"/>
</figure>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p>
</article>
</div>

<footer>
<a href="#wrapper"> To the Top </a>
</footer>
</div>
</body>
</html>


My js code:

$( document ).ready(function() {
$('#content').hide();
});

var visible = $('#menu_a').first();
//visible.show(); this was a test and it did NOT work!!!!!!

var show_me = function(article){
visible.hide();
visible = article;
visible.show();
}

$("#menu_a").click(function(event) {
var id_of_article = $(this).attr('href');
var the_article = $(id_of_article);
show_me(the_article);
even.preventDefault();
});


Why does this not work? Console doesn't show any errors.

Maybe because every article is within the 'content' id ?

Answer

CSS solution from previous answer is really nice, but if you want to use jQuery, here is jQuery version.

You have over-complicated this, and yes - one of main problems is that your content/container, which keeep articles, is always hidden. To solve this, hide articles rather:

article {
  display:none;
}

And simplified JQuery:

$("#menu ul li a").click(function() {

var id_of_article = $(this).attr('href');
$('article').not($(id_of_article)).hide();
 $(id_of_article).show();

even.preventDefault();


});

Demo: https://jsfiddle.net/7kd16e1b/1/