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">
<ul>
<div id="link1">
<li><a href= "#aboutme" class="button button-large button-primary">About me</a></li>
</div>
<div id="link4">
<li><a href= "#contactinfo" class="button">Contact info</a></li>
</div>

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

<section id="main_section">
<div>
<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>
</div>
<div>
<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>
</article>
</div>
</section>


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

Replies

- page 2
Oldest  Newest  Rating
0 daniel ophir · September 30, 2015
It's not helping and i suspecting it's something in the html code 
<nav id="nav">
<ul>
<div id="link1">
<li><a href= "#aboutme" class="button">About me</a></li>
</div>
<div id="link2">
<li><a href= "CV.doc" class="button">CV en</a></li>
</div>
<div id="link3">
<li><a href= "CV.doc" class="button">CV he</a></li>
</div>
<div id="link4">
<li><a href= "#contactinfo" class="button">Contact info</a></li>
</div>
<div id="link5">
<li><a href= "http://www.danielophir.com" class="button">Gallery</a></li>
</div>
<div id="link6">
<li><a href= "1/english.html" class="button">Web designs</a></li>
</div>
</ul>
</nav>

that is the full navigation bar should i go to html css forum and that's it?
0 Aakash Ahmed · September 29, 2015
Using JQuery, You should write this:

$(document).ready(function(){
  var aboutArticle = $("article#aboutme"),
      contactArticle = $("article#contactInfo"),
      aboutButton = $("a[href='#aboutme']"),
      contactButton =$("a[href='#contactinfo']");

  // Hiding both articles at first
  aboutArticle.slideUp(400);   // set the speed you like , e.g 400==0.4s
  contactArticle.slideUp(400);

  aboutButton.on("click",function(){
    contactArticle.slideUp(400);
    aboutArticle.slideDown(400);
  });

  contactButton.on("click",function(){
    aboutArticle.slideUp(400);
    contactArticle.slideDown(400);
  });
});

Hope, this'll help you!
0 daniel ophir · September 29, 2015
Hello guys i see that it's been a few days and no one gave me an answer so should i give more information about my question or quote something else from the html doc? I'm still waiting, and it's pretty important to me.  
  • 1
  • 2

Javascript

124,610 followers
About

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

Links
Moderators