Hello experts,
we're trying to fulfill special knowledge request raised by our customer:
Change KB article sturcture so user will be able to navigate from side panel, and by clicking some section, only the clicked section content will be visible.
we wish to achieve this by modifing OOB body article html source code, and not create custom widgets that could lead to future issues (search, upgrades etc).
When we're running html code on basic html editor it's working:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#sidePanel {
width: 200px;
height: 100vh;
background-color: #f0f0f0;
position: fixed;
left: 0;
top: 0;
padding: 20px;
}
#content {
margin-left: 220px;
padding: 20px;
}
section {
margin-bottom: 20px;
display: none;
}
section:target {
display: block;
}
</style>
<title>Side Panel Navigation</title>
</head>
<body>
<div id="sidePanel">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
<div id="content">
<section id="section1">
<h2>Section 1</h2>
<p>This is the content of Section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the content of Section 2.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the content of Section 3.</p>
</section>
</div>
</body>
</html>
But when using same code in SN, the html strcuture get changed by the system after save and it's breaking the functionality .
SN Code (which changes after save orginal html code):
<p> </p>
<p> </p>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#sidePanel {
width: 200px;
height: 100vh;
background-color: #f0f0f0;
position: fixed;
left: 0;
top: 0;
padding: 20px;
}
#content {
margin-left: 220px;
padding: 20px;
}
section {
margin-bottom: 20px;
display: none;
}
section:target {
display: block;
}
</style>
<div id="sidePanel">
<ul>
<li><a href="#section1" rel="nofollow">Section 1</a></li>
<li><a href="#section2" rel="nofollow">Section 2</a></li>
<li><a href="#section3" rel="nofollow">Section 3</a></li>
</ul>
</div>
<div id="content">
<h2>Section 1</h2>
<p>This is the content of Section 1.</p>
<h2>Section 2</h2>
<p>This is the content of Section 2.</p>
<h2>Section 3</h2>
<p>This is the content of Section 3.</p>
</div>
Any suggestions?
Thanks,
Tomer
