Snippets

Coding snippets i made for y'all free use, no need for credit.

1. Highlights

mini openins blog ss archive or whatrv

carasoul

This is heavily inspired by the instagram highlight feature, most of this code is snatched from w3schools.

copy paste code

HTML

  
  <div id="OpeningPage" class="tabcontent beginningtabcontent" >
<p>mini openins blog ss archive or whatrv</p>
<img onclick="openCity(event, 'Topic-one-post-one')"  class="roundyboy" src="https://i.pinimg.com/736x/65/dc/86/65dc86b37988612101e00008e1e20a15.jpg">
  <button onclick="openCity(event, 'Topic-two-post-one')">carasoul </button>
</div>

<div id="Topic-one-post-one" class="tabcontent beginningtabcontent highlightab">
  <h3>1</h3>
  <p>TEST</p>
  <button onclick="openCity(event, 'Topic-one-post-two')">1/2 </button>
</div>

<div id="Topic-one-post-two" class="tabcontent beginningtabcontent highlightab">
  <h3>2</h3>
  <p>Paris is the capital of France.</p> 
    <button onclick="openCity(event, 'OpeningPage')">x</button>

</div>

<div id="Topic-two-post-one" class="tabcontent beginningtabcontent highlightab">
  <h3>3</h3>
  <p>Tokyo is the capital of Japan.</p>
    <button onclick="openCity(event, 'OpeningPage')">x</button>

</div>
  

CSS

    
    
.beginnigntab{
    display: none;

}

/* Style the tab content */
.beginningtabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  border:none;

    
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.roundyboy{
      border-radius: 50%;
      width: 150px;
      height: 150px;

}
.highlightab{
    background-color: var(--sidebar-background-color);
    border-radius: 15px;
    border:  2px solid #240101;
    color:var(--content-background-color);
}
    

JAVASCRIPT

    
       function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  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("tablinks");
  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(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();