internal link display none to block

+1 daniel ophir · September 26, 2015
Hello everyone I'm pretty new to web design and I'm trying to create internal link (inside a section) just to switch between the articles I need a few buttons like that but for now the concept will be enough here is the example:

That is the internal links or buttons how ever you want to call them.

<div id="new_div">
<nav id="nav">
<div id="link1">
<li><a href= "#aboutme" class="button button-large button-primary">About me</a></li>
<div id="link4">
<li><a href= "#contactinfo" class="button">Contact info</a></li>

That is the section i need the visibility and display to change on both.

<section id="main_section">
<article id="aboutme" style="visibility: visible;">
<header><h1>About me</h1></header>
<p>bla bla bla yate yate yate etc etc etc...</p>
<footer><p id="signature">Made by Daniel.O.</p></footer>
<article id="contactinfo" style="visibility: hidden; display: none; ..">
<header><h1>Contact info</h1></header>
<p>bla bla bla yate yate yate etc etc etc...</p>
<footer><p id="signature">Made by Daniel.O.</p></footer>

all i need is to switch between the articles and for now i couldn't even managed to make the link for the contactinfo so any help will be appreciated!

Post a Reply


- page 1
Oldest  Newest  Rating
0 daniel ophir · October 6, 2015
I have two problems with the website now:
1. the article in the URL is not necessarily that one that is showing meaning i will see and the article in the center will be contact info
2.this is the the continuing of the first problem when i press back button on the browser i see the same article but the URL changes before the back button and after (as it was the last page i was in) but then again i go back to the first problem the article itself doesn't change beside that, its good the jquery code you gave me helped me so far thanks a lot.
just those two issues and if it's not JS or Jquery code tell me what sub forum to go to.  
0 Aakash Ahmed · October 6, 2015
no no you can't  override browser back button with javascript. the back button only shows previous page that you loaded before this page
0 daniel ophir · October 5, 2015
It's working pretty nice, but one more issue for now: the back on browser is not working like i can't see what was the previous article
0 Aakash Ahmed · October 5, 2015
Remove all the css first, you given to them.
Remove all the jquery files included.

then insert this into your html head before including any javascript code or file
<script src=""></script>

this will include the jquery 1.9.1.

then include my code!

Please remove all the css you have given to the links and articles!
like visibility, display, opacity!
0 daniel ophir · October 4, 2015
It's not working the JavaScript code you gave me... i checked already if the link is maybe broken, It's not broken so it got to be the JavaScript\Jquery file. 
The file JS file is connected i checked it which leaves me with only 3 options:
1. for some reason i don't have that version you said of Jquery.
2. the code of that Jquery is not working for some other weird reason.
3. I'm giving a wrong attribute because i tried giving it display: none and visibility: hidden or one of them but maybe I'm doing something wrong with that aspect. 
I did exactly as detailed above
if I'm doing or thinking incorrectly tell me because I'm clueless.
0 Aakash Ahmed · October 4, 2015
data-article is an attribute of link which tells what article to open when this link is clicked!

and sorry about the 'switch-link", actually it's article-link , it's a class you have to give to the links!
0 daniel ophir · October 3, 2015
nothing happens and what is data article?
what is switch links?
0 Aakash Ahmed · October 2, 2015
I am exactly showing you the code to do that. I displayed only contact article and and about article in this code. you can create as many as articles in it.

Make your links in navbar like this:
<a href="#aboutme" data-article='about-me' class-'article-link button' >About Me</a>

1- give your id of article which you want to switch in data-article
2- Give any classes to the links you want, but "switch-link" is neccessary.

Make your articles like this:

<article id='about-me' class='article-box'>
<!-- article content -->

1- Make as many as links and articles you want and use the javascript below, i give.
2- you have to give article-box class to every article.

For this javascript, you need jQuery 1.9.1 or up:

      var articleofthis = $(this).data("article");
      $("#" + articleofthis).show();
0 daniel ophir · October 1, 2015
im trying to create a situation when you press on one of the links from the navagation bar to your left < the page doesn't change but the article in the center does.
for example:
i have a pattern means the owl page : css tags navagation bar everything. I would like to keep that pattern only changing one aspect of text meaning the article inside the section i want the article to come up only when pressing the related link also i want it to be in the same section so it will come up with the same css attributes. 
0 Aakash Ahmed · October 1, 2015
What are you trying to do? 
Create a navbar?
Switching between articles?

If switching between articles, then what type of switch, mean hide one and display other or to load the page entirely?
Please describe it?
  • 1
  • 2



A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.