מחליף תוכן

חודשי

שנתי

הזן כותרת

הזן תיאור
$ 39
99
חודשי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הזן כותרת

הזן תיאור
$ 39
99
חודשי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הזן כותרת

הזן תיאור
$ 39
99
חודשי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הזן כותרת

הזן תיאור
$ 89
99
שנתי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הזן כותרת

הזן תיאור
$ 89
99
שנתי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הזן כותרת

הזן תיאור
$ 89
99
שנתי
  • פריט רשימה #1
  • פריט רשימה #2
  • פריט רשימה #3
פופולרי

הוראות

  1. ליצור את הכפתור, אפשר עם אלמנטור, אבל עדיף עם HTML
  2. ליצור שני אזורים עם קופסת מחירים.
  3. ליצור פונקציה בעת הקלקה על הכפתור.
  4. בפונקציה אנחנו רוצים, לשנות את צבע הרקע של הכפתור, להזיז את העיגול בכפתור, להחביא אזור מחירים אחד, לגלות אזור מחירים שני.
  5. כאשר מקליקים שוב, זה עושה הכל הפוך.
				
					<div class="btn-wrap">
    <div class="my-btn"></div>
</div>
				
			
				
					    .btn-wrap{
        width: 100px;
        background-color: #D5D5D5;
        padding: 5px;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        transition: 0.5s;
    }
    .my-btn{
        background-color: white;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        transition: 0.5s;
    }
    
    .btn-wrap.active{
        background-color: black;
    }
   
    .btn-wrap.active .my-btn{
        transform: translatex(-60px);
    }
    .my-price1{
        display: none;
    }
    
    .my-price1.active{
        display: flex;
    }
    
    .my-price2{
        display: none;
    }
    
    .my-price2.active{
        display: flex;
    }
				
			
				
					document.querySelector(".btn-wrap").onclick = function(){
    
document.querySelector(".btn-wrap").classList.toggle("active");
    
document.querySelector(".my-price1").classList.toggle("active");

document.querySelector(".my-price2").classList.toggle("active");

};