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 1
Oldest  Newest  Rating
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.  
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 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 · October 1, 2015
What are you trying to do? 
Create a navbar?
or
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?
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 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 -->
</article>




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:
$(document).ready(function(){
  $("article.article-box").each(function(){
    $(this).hide();
  });

  $("a.article-link").each(function(){
    $(this).on("click",function(){
      var articleofthis = $(this).data("article");
      $("article.article-box").each(function(){
          $(this).hide();
      });
     
      $("#" + articleofthis).show();
    });
  });
});
0 daniel ophir · October 3, 2015
nothing happens and what is data article?
what is switch links?
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 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 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="http://code.jquery.com/jquery-1.9.1.min.js"></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!
  • 1
  • 2

Javascript

107,049 followers
About

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

Links
Moderators