a quick question, can anyone advise, how exactly this works that I can switch between different sections on the left, but the link remains the same on this page, however, content of the page changes?

https://help.surveymonkey.com/categories/Design_Manage

CodePudding user response：

tl;dr:

You can do that with Javascript and CSS. In this case, it's called tabs. For example, you can use a CSS framework like Bootstrap. There, the Javascript is already included.

CodePudding user response：

Here you are https://www.w3schools.com/howto/howto_js_tabs.asp

The easiest way to make tab in page is using JS:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CodePudding user response：

Search about SPA's (Simple Page Applications), maybe that page was made with React, Vue or Angular.

CodePudding user response：

Have a look at the actual code using your browser's devtools inspect facility.

You'll see that the content you refer to is already in that page. Various bits just get revealed or hidden as the user clicks the arrows.

There's a list for example which starts like this:

 <ul class="content">
                                        <li style=""><a href="https://help.surveymonkey.com/articles/en_US/kb/How-to-create-a-survey?bc=Creating_Surveys" class="article-title">How to Create a Survey</a>
                                            <p>Click Create Survey in the upper-right corner of your account and choose one of the options: Start from scratch, copy an existing survey, search surveys and templates, or use build it for me.</p>
                                        </li>
                                        <li style=""><a href="https://help.surveymonkey.com/articles/en_US/kb/Editing-Questions?bc=Creating_Surveys" class="article-title">Adding &amp; Editing Questions</a>
                                            <p>Add new questions to your survey from the BUILDER, QUESTION BANK, or by clicking  New Question on the Design Survey page. When you add a new question, an editing view appears where you can enter your question text and customize the question. All question types, including Text and Image, count towards the 10-question limit of the Free plan.</p>
                                        </li>
....
</ul>