I tried using JavaScript without successes because I don't know how to connect my bottom (hyperlink in reality) to the div content itself so I would just replace the string of my buttom instead of the div itself. The image is the best explanation: https://ibb.co/xz0S8sm
Here's my code:
<div >
<ul >
<li ><a id="schedule-color" href="#"><i id="sch" ></i>Schedule</a></li>
<li ><a id="schedule-color-b" href="#"><i id="sch" ></i>Tracking</a></li>
<li ><a id="schedule-color-b" href="#"><i id="sch" ></i>Organize</a></li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li ><i id="check-square" ></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li ><i id="check-square" ></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li ><i id="check-square" ></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul >
<a href="#">Terms</a>
<a id="privacy" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li ><i id="check-square" ></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li ><i id="check-square" ></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li ><i id="check-square" ></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li ><i id="check-square" ></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div >
<img src="images/description-2-app.png" alt="">
</div>
</div>CodePudding user response：
I would suggest you two ways to do it, by either using display:none and display:revert to switch as you are trying to do in your code, or use just have 1 div and directly writing using Javascript.
Using display:none and display:revert:
let buttons = document.querySelectorAll('button')
buttons[0].onclick =function(){
document.querySelector('#schedule-tasks').style.display ='revert'
document.querySelector('#tracking-tasks').style.display ='none'
document.querySelector('#organize-tasks').style.display = 'none'
}
buttons[1].onclick = function(){
document.querySelector('#schedule-tasks').style.display ='none'
document.querySelector('#tracking-tasks').style.display ='revert'
document.querySelector('#organize-tasks').style.display = 'none'
}
buttons[2].onclick = function(){
document.querySelector('#schedule-tasks').style.display ='none'
document.querySelector('#tracking-tasks').style.display ='none'
document.querySelector('#organize-tasks').style.display = 'revert'
}<div >
<ul >
<li ><button id="schedule-color-b" ><i id="sch" ></i>Schedule</li>
<li ><button id="schedule-color-b" ><i id="sch" ></i>Tracking</li>
<li ><button id="schedule-color-b" ><i id="sch" ></i>Organize</li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li ><i id="check-square" ></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li ><i id="check-square" ></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li ><i id="check-square" ></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul >
<a href="#">Terms</a>
<a id="privacy" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li ><i id="check-square" ></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li ><i id="check-square" ></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li ><i id="check-square" ></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li ><i id="check-square" ></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div >
<img src="images/description-2-app.png" alt="">
</div>
</div>Directly writing using Javascript
let buttons = document.querySelectorAll('button')
let content = document.querySelector('#content')
buttons[0].onclick= function(){content1()};
buttons[1].onclick= function(){content2()};
buttons[2].onclick= function() {content3()};
//make the initial value to be schedule-tasks
window.onload = content1()
function content1(){
content.innerHTML = `
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li ><i id="check-square" ></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li ><i id="check-square" ></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li ><i id="check-square" ></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul >
<a href="#">Terms</a>
<a id="privacy" href="#">Privacy</a>
</ul>
</div>`
}
function content2(){
content.innerHTML= `
<div id="tracking-tasks" >
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
`
}
function content3(){
content.innerHTML=` <div id="organize-tasks" >
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li ><i id="check-square" ></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li ><i id="check-square" ></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li ><i id="check-square" ></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li ><i id="check-square" ></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
`
}<div >
<ul >
<li ><button id="schedule-color-b" ><i id="sch" ></i>Schedule</li>
<li ><button id="schedule-color-b" ><i id="sch" ></i>Tracking</li>
<li ><button id="schedule-color-b" ><i id="sch" ></i>Organize</li>
</ul>
<div id='content'></div>
<div >
<img src="images/description-2-app.png" alt="">
</div>
</div>CodePudding user response：
You can pass the id of the content upon click of the desired bottom to JavaScript function using onclick event, and make that div style visible. After this, you can hide the visibility of other contents. Here's the working:
function changeContent(id) {
document.getElementById(id).style.display = 'block';
if (id != 'schedule-tasks')
document.getElementById('schedule-tasks').style.display = 'none';
if (id != 'tracking-tasks')
document.getElementById('tracking-tasks').style.display = 'none';
if (id != 'organize-tasks')
document.getElementById('organize-tasks').style.display = 'none';
}<div >
<ul >
<li ><a id="schedule-color" onclick="changeContent('schedule-tasks')" href="#"><i id="sch" ></i>Schedule</a></li>
<li ><a id="schedule-color-b" onclick="changeContent('tracking-tasks')" href="#"><i id="sch" ></i>Tracking</a></li>
<li ><a id="schedule-color-b" onclick="changeContent('organize-tasks')" href="#"><i id="sch" ></i>Organize</a></li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li ><i id="check-square" ></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li ><i id="check-square" ></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li ><i id="check-square" ></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul >
<a href="#">Terms</a>
<a id="privacy" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li ><i id="check-square" ></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li ><i id="check-square" ></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li ><i id="check-square" ></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li ><i id="check-square" ></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div >
<img src="images/description-2-app.png" alt="">
</div>
</div>