Skip to content

Commit

Permalink
Tab functionality done
Browse files Browse the repository at this point in the history
  • Loading branch information
Aliasger Rasheed committed Oct 31, 2019
1 parent d3c63cc commit 15cb7cf
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 50 deletions.
13 changes: 13 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,19 @@ button:focus {
display: flex;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

.group-tabs button{
font-size: 0.9rem;
border-color: var(--secondary-highlight-color);
border: solid 1px}


.text-link p {
padding: 1rem;
}
Expand Down
210 changes: 160 additions & 50 deletions homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ <h1 class="logo-text keylime-logotype"> KeyLime </h1>

<h2> Allie Webber </h2>
<figure>
<img src="images/profile-picture1.png" alt="Profile Picture" width="100%">
</figure>
<img src="images/profile-picture1.png" alt="Profile Picture" width="100%">
</figure>

<h3> About </h3>

Expand All @@ -62,10 +62,10 @@ <h3> About </h3>

<section id="feed">
<div class="group-tabs" id="feed-tab">
<button class="group-tab" >group 1</button>
<button class="group-tab">group 2</button>
<button class="group-tab">group 3</button>
</div>
<button class="group-tab" onclick="switchTab(event,'tsawwassen')">Tsawwassen Hiking group</button>
<button class="group-tab" onclick="switchTab(event,'juno')">Juno Highschool 2013</button>
<button class="group-tab" onclick="switchTab(event,'dank')">Dank memes</button>
</div>
<div class="new-post-cont">

<h3> Create Post </h3>
Expand All @@ -75,70 +75,180 @@ <h3> Create Post </h3>

</div>
</div>
<section id="tsawwassen" class="tab-content">

<article class="post-cont">
<h3> Jane Wensley </h3>
</div>
<figure>
<img src="images/post-image1.jpeg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
<article class="post-cont">

<h3> Collin Maeda </h3>
<p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>
<article class="post-cont">
<h3> Jane Wensley </h3>
</div>
<figure>
<img src="images/post-image1.jpeg" alt="Post Image">
</figure>

<hr>
<h3> Comments </h3>
<p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>

<h3> Comments </h3>

<p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>
</article>
<article class="post-cont">

<h3> Collin Maeda </h3>
<p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>

</article>
<article class="post-cont">
<h3> Lee Travis </h3>
</div>
<figure>
<img src="images/post-image2.jpg" alt="Post Image">
</figure>
<hr>

<h3> Comments </h3>
<p> <strong> Tomos Miles </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>
<h3> Comments </h3>

<p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>

</article>

<article class="post-cont">
<h3> Rheanna Meyers </h3>
</div>
<figure>
<img src="images/post-image3.jpg" alt="Post Image">
</figure>
</article>
<article class="post-cont">
<h3> Lee Travis </h3>
</div>
<figure>
<img src="images/post-image2.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Keane Brett </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>
<h3> Comments </h3>
<p> <strong> Tomos Miles </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
</article>

<article class="post-cont">
<h3> Rheanna Meyers </h3>
</div>
<figure>
<img src="images/post-image3.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Keane Brett </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
</section>

<section id="dank" class="tab-content">

<article class="post-cont">
<h3> Alex Mars </h3>
</div>
<figure>
<img src="images/post-image1.jpeg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
<article class="post-cont">

<h3> Collin Maeda </h3>
<p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>

<hr>

<h3> Comments </h3>

<p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>


</article>
<article class="post-cont">
<h3> Lee Travis </h3>
</div>
<figure>
<img src="images/post-image2.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Tomos Miles </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>

<article class="post-cont">
<h3> Rheanna Meyers </h3>
</div>
<figure>
<img src="images/post-image3.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Keane Brett </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
</section>

<section id="juno" class="tab-content">

<article class="post-cont">
<h3> Jane Wensley </h3>
</div>
<figure>
<img src="images/post-image1.jpeg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Julan Frohen </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
<article class="post-cont">

<h3> Collin Maeda </h3>
<p> Hey guys, would anyone happen to have a place for me to stay tomorrow night in Van? </p>

<hr>

<h3> Comments </h3>

<p> <strong> Eve Feller </strong> &nbsp;&nbsp; Try Lynn!! I think she has a place you can stay</p>


</article>
<article class="post-cont">
<h3> Lee Travis </h3>
</div>
<figure>
<img src="images/post-image2.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Tomos Miles </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>

<article class="post-cont">
<h3> Rheanna Meyers </h3>
</div>
<figure>
<img src="images/post-image3.jpg" alt="Post Image">
</figure>

<h3> Comments </h3>
<p> <strong> Keane Brett </strong> &nbsp;&nbsp; Beautiful photo! When are you heading back home?</p>


</article>
</section>

</section>
<!-- <section>
<div class="group-tabs" id="chat-tab">
<button class="group-tab">group 1</button>
<button class="group-tab">group 2</button>
<div class="group-tabs" id="chat-tab">
<button class="group-tab">group 1</button>
<button class="group-tab">group 2</button>
<button class="group-tab">group 3</button>
</div>
</section> -->
</section> -->
</main>

<script src="js/scripts.js"></script>
</body>]

</html>
</html>
22 changes: 22 additions & 0 deletions js/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// https://www.w3schools.com/howto/howto_js_tabs.asp
function switchTab(evt, groupName) {
console.log("function hit"+groupName);

var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("group-tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(groupName).style.display = "block";
evt.currentTarget.className += " active";
}
Empty file added references.html
View file
Empty file.

0 comments on commit 15cb7cf

Please sign in to comment.