<div id="wrap">
<div class="tabs_buttons">
   <a id="btn_1" href="#content_1" class="active">חברת בזק</a>
   <a id="btn_2" href="#content_2">פרטנר תקשורת</a>
   <a id="btn_3" href="#content_3">סלקום</a>
</div>
<div class="tabs_contents">
   <div id="content_1" class="active"><p>כששירותי הטלפוניה ניתנו במסגרת משרד התקשורת, הייתה הפרדה בין ההכנסות להוצאות. הכסף שנגבה עבור שירותים אלו הועבר ישירות למשרד האוצר, אך כל הוצאה דרשה אישור ממשלתי. מצב זה הגביל מאוד את כוח האדם והלוגיסטיקה, וגרם, בין השאר, להמתנה ארוכה מאוד להתקנת קווי טלפון (במקרים רבים, אף מספר שנים) ולשירות גרוע באופן כללי.</p>
<p>כל שינוי וחידוש בשירותי הטלפון הצריך בירוקרטיה במתן אישורים, לכן שירות הטלפון של משרד התקשורת לא היה יכול להתאים עצמו בצורה דינמית לשינויי הסביבה והטכנולוגיה. גם לאחר הפיכתה לחברה ממשלתית חלו על החברה תקנות והגבלות, אך במידה כזו שאפשרה לחברה להגיב במהירות יחסית לנעשה בשוק.</p></div>
   <div id="content_2">  החברה החלה את דרכה בשוק הסלולר עם הקידומת 054, ועם השנים נוספו לה הקידומות 055, 067 ו-066. כשהוחלט לאחד את קידומות המפעילים הסלולריים, קיבלה את הקידומת המקורית 054, ומאז, בשל החלת החוק לניידות מספרים, לחברה מנויים בכל הקידומות הסלולריות.</div>
   <div id="content_3">סלקום החלה את דרכה עם קידומת 052, ועם השנים התרחבה לקידומות 053, 058, 064 ו-065. מאפריל 2004, עם המעבר ל-7 ספרות על פי תוכנית המיספור של משרד התקשורת, סלקום נשארה עם 052.</div>
</div>
</div>
body{
  direction: rtl;  
  font-family: 'Rubik', sans-serif;
  padding: 20px
}
#wrap{
  width: 750px;
  margin: 15px auto;
}
p{
  margin: 0 0 10px;
}
.tabs_buttons a{
    color: #000;
    font-size: 25px;
    display: inline-block;
    background: #ddd;
    text-decoration: none;
    line-height: 1;
    padding: 15px;
    transition: all .5s;
    border-radius: 5px 5px 0px 0px;
   box-shadow: 0px -5px 5px inset rgba(0, 0, 0, .1);
}
.tabs_buttons a:hover{
  opacity: .8;
}
.tabs_buttons a.active{
  background: #666;
  color: #fff;
  box-shadow: none;
}
.tabs_contents{
  border: 1px solid #666;
  border-radius: 5px 0px 5px 5px;
  background: #fff;
  font-size: 18px;
  line-height: 1.3;
}
.tabs_contents > div{
  padding: 15px;
}
.tabs_contents > div:not(:first-child){
  display: none;
}
jQuery('.tabs_buttons a').on('click', function(e){
  jQuery(this).addClass('active').siblings().removeClass('active');
  var href = jQuery(this).attr('href');
  jQuery(href).show().siblings().hide();
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Rubik&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js