Javascript dynamic pages

Question

Little background: The site is for a university assignment, we are not allowed to use 3rd party libraries such as bootstrap etc. I thought I had a solution but i can only get it to work for 2 buttons (showing or hiding the opposite one) but not multiple. I will have at least 10 buttons.

I have tried to research on stack overflow but could not find a solution. Here is my HTML+CSS. Home is the default page and the rest should become visible in the white space below when their button is clicked. This is a products page.

JSFIDDLE: https://jsfiddle.net/33n7yb5h/

Any help would be greatly appreciated, it does not need to be a written solution but simply pointing me in the right direction will do... I have little to no javascript knowledge so I'm not entirely sure what I should be googling in the first place...

<html>
    <head>
        <title>Design</title>
        <link rel="stylesheet" type="text/css" href="css/store.css">
        <script type="text/javascript" src="javascript/js.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <ul>
            <li id="left"><a href="#home">Company</a></li>
            <li id="left"><a href="#home">Sales</a></li>
            <li id="left"><a href="#home">About</a></li>
            <li id="left"><a href="#home">Contact</a></li>
            <li id="right1"><a href="">Cart</a></li>
            <li id="right2" onclick="myFunction()"><a href="">Geolocate</a></li>
        </ul>

        <dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>

        <div id="items">
            <ul>
                <li id="left"><a href="">Home</a></li>
                <li id="Cars"><a href="">Super Cars</a></li>
                <li id="Cars"><a href="">Topic 2</a></li>
            </ul>

            <div id="homepage">
                <span><p> Welcome to the store</p></span>
            </div>

            <div id="showCars">
                <div class="productBox">
                    <div class="productPicture">
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}

body{
    margin: 0px;
    padding: 0px;
    font-family: tahoma;
    background-image: "/img/bg.jpg";
}

p{
    text-align: center;
}

#items{
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    margin-top: 25px;
    margin-left: 225px;
    margin-right: 225px;
    position: absolute;
    width: 80%;
    height: 80%;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    background: white;
    overflow: hidden;
}

.productBox{
    border: 2px solid black;
    width: 200px;
    height: 300px;
    margin-top: 5px;
    text-align: center;
}

.productPicture{
    border: 1px solid black;
    width: 90%;
    height: 150px;
    margin: 0 auto;
    margin-top: 5px;
    padding: 5px;
    display: inline-block;
}

#showCars{
    display: none;
}

I'd just like to point out that you are in fact using a third party library. `jQuery != vanilla JS` — Schlaus, Jan 01 '17 at 22:50

John · Accepted Answer · 2017-01-03T17:46:42.617

Here is some pseudo code if I understand correctly what you are needing: There are tons of ways to do this, and I don't have much to go on, so here is just 1 example.

<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
    <ul>
       <li id=IDname0></li>
       <li id=IDname1></li>
       <li id=IDname2></li>
    </ul>


</div>




<script>

var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];

var x = 0;

Function cars()
{
// for each element in cars,
   for ( x=0; x<cars.length; x++ )
   {
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
      Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name ( from your <li> above
   }
}

Function boats()
{
   for ( x=0; x<cars.length; x++ )
   {
      Document.getElementById('IDname'+x).innerHtml = boats[x];
   }
}



</script>

Hey and thank you for taking the time to reply, could you perhaps comment the code a little so i know what im looking for? Will this toggle say a div with the ID cars so only cars show up & then if say boats is clicked cars are removed and boats appear? — James D, Jan 02 '17 at 17:34
sure! I added comments for the cars() function. Boats is the exact same logic, except with boats. hopefully this helps you! — John, Jan 03 '17 at 17:48

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

You can use a query string, and then make the buttons link to the query string parameter which checks the string and defines what each page/button will do. This will allow you to have the page html css etc mostly the same except for the parts that change on button click.
Many sites do this.
example: https://www.etsy.com/ca/search?q=wallet

edited May 23 '17 at 12:24

Community

1
1

answered Jan 02 '17 at 02:25

SbnSeebee

64
8

score 0 · Answer 3 · answered Jan 02 '17 at 17:56

0

I found a solution here: http://www.w3schools.com/howto/howto_js_tabs.asp for anyone else who is looking for the same thing!

answered Jan 02 '17 at 17:56

James D

341
1
3
13

Javascript dynamic pages

3 Answers3