3

I am a very beginner in coding and I have been trying to scour the Internet for different ways to do this and they seem to be all over the place. I have one simple page with an "About Me" link and a "Contact" link. I would like the default information to be the About Me information and then if you click Contact for the Content on the page to switch to my Contact info and then if you click About Me again for it to switch back.

Is it possible to do this with just HTML or do I need to use jQuery? I am trying to set up a proper Div structure and figure out the necessary jQuery functions, but I am having a hell of a time with what seems to be an incredibly simple problem.

I appreciate your help.

Thanks!

update #1: here is what I am writing at the moment

<link rel="stylesheet" type="text/css" href="css.css">

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>

</head>
<header>
    <img src="header.jpg" style="border:3px solid black; border-radius:10px">
    <p>the only way to predict the future, is to create it...</p>
    <div>
      <ul>
          <li><a href="#" class="aboutme">About Me</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
    </div>
</header>

<body>
  <div class="aboutme" id="about me" >
    <p>This is about me</p>
  </div>

  <div class="contact" id="contact" style="display:none">
    <p>This is my contact into </p>
  </div>
</body>

</html>

I've tried using these different techniques but am having trouble understanding them

http://jsfiddle.net/mA8hj/ Change content of div - jQuery Hiding table data using <div style="display:none"> http://jsbin.com/ivenik/2/edit?html,css,js,output

Community
  • 1
  • 1
riZZi
  • 59
  • 1
  • 1
  • 3

3 Answers3

7

I'm assuming what you're doing is something like this...

<html>
<body>
<p>Page Title</p>
<div id="AboutMeHTML" style="visibility:hidden;">This is about me</div>
<div id="ContactHTML" style="visibility:hidden;">This is contact HTML</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td onclick="document.getElementById('AboutOrContactDiv').innerHTML=document.getElementById('AboutMeHTML').innerHTML;">About Me</td>
    <td onclick="document.getElementById('AboutOrContactDiv').innerHTML=document.getElementById('ContactHTML').innerHTML;">Contact Info</td>
  </tr>
</table>
<div id="AboutOrContactDiv"></div>
</body>
</html>

There are in fact several ways of accomplishing this. The method I listed above is with javascript, but may not be ideal in certain situations. Another javascript method would be to toggle the visiblity of the AboutMeHTML div and the ContactHTML div although I often avoid that because it makes the page jump around at times. You could also use an iframe and seperate pages for AboutMe and Contact and just change the source, or instead of specifying the AboutMe and Contact innerHTML in the body of the document in a hidden div you could specify it in javascript as a variable. The latter might perform better, but the way I did it makes it easier to edit using Dreamweaver or the like.

miken32
  • 42,008
  • 16
  • 111
  • 154
DannyIkard
  • 79
  • 2
  • thank you this is example what I was looking for, an incredible simple but elegant way of switching content – riZZi Apr 20 '15 at 23:34
0

If you only have 2 links the simplest thing you can do is do 2 pages, an about page and contact page and the links click through to the separate pages. If you want it all on the one page, you will need jquery/javascript. Surround the 'about page' content in its own div and the 'contact' content in its own div and give those divs their own class or id. Then use jquery on click event to show/hide each section depending on link clicked. You should be able to find show/hide div jquery samples all over this site.

Mia Sno
  • 947
  • 1
  • 6
  • 13
  • everything you just said I know. It's so easy to just use two separate pages, however, I am trying to challenge myself to learn more for harder projects to come. I have been looking all over this site for just simple jquery hide / display and they haven't seemed to be exactly as simple as I want. I'll keep looking. thanks – riZZi Apr 20 '15 at 23:06
0

Ok, I think I found something to work, actually it does work, but I still feel it's overly complicated. Here is what the code looks like.

<link rel="stylesheet" type="text/css" href="css.css">

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
    <script>$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    $("#aboutme").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").fadeOut(function(){
                $(this).next().fadeIn();
            });
        else {
            $(".divs div:visible").fadeOut(function(){
                $(".divs div:first").fadeIn();
            });
        }
        return false;
    });
    $("#contact").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").fadeOut(function(){
                $(this).prev().fadeIn();
            });
        else {
            $(".divs div:visible").fadeOut(function(){
                $(".divs div:last").fadeIn();
            });
        }
        return false;
    });
});
</script>

</head>
<header>
    <img src="header.jpg" style="border:3px solid black; border-radius:10px">
    <p>the only way to predict the future, is to create it...</p>
    <div>
      <ul>
          <li><a href="#" id="aboutme">About Me</a></li>
          <li><a href="#" id="contact">Contact</a></li>
        </ul>
    </div>
</header>

<body>
  <div class="divs">
    <div class="aboutme">1</div>
    <div class="contact">2</div>

</div>

</html>
riZZi
  • 59
  • 1
  • 1
  • 3