html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
Hello there! yeah you who is reading this ...
I wrote this because I want to see the threads in the SoloLearn Q&A forum to be more well formatted (thus be more searchable), particularly in terms of tags.
So please comment your ideas for forum tags best practices, and/or any points you think necessary to be added into this.
I hope this might help those who even had no idea what tags are (like me in the earlier days), and in long run, help the search bar improve its work quality.
@ipang
Thanks to:
@Yourself (https://www.sololearn.com/Profile/20487771/?ref=app) for CSS styling
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forum tagging guide & suggestion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>About Relevant Tags section <br>In Q&A Discussion forum</h3>
<details>
<summary id="s1">What are tags?</summary>
<div>
<p><span class="huge">T</span>ags are words or phrase we can use to describe the topic or category for a discussion thread. Tags can be used to specify a language name that is relevant with the question, and/or specific tutorial/lesson subject relevant to the issue brought up for discussion in the forum.</p>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
/*
∧ ∨
Design by:
@Yourself
(https://www.sololearn.com/Profile/20487771/?ref=app)
*/
:root
{
--lt: #fff;
--heading: #bbdffc;
--shade: #202020;
--bg2: var(--lt);
--b: #121212;
--sc4: #32A7F4;
--grey: #2c2c30;
--tags: darkgreen;
}
body
{
margin: 0; padding: 0;
/* background: linear-gradient(#2579dc, #5ea7fe);*/
background-color: #2579dc;
font-family: 'poppins';
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.onload = () =>
{
let activeId = null;
// clicking on a <summary> element will close a
// previously opened <summary>, if any.
document.querySelectorAll( "summary" )
.forEach( el =>
{
el.addEventListener( "click", evt =>
{
if( activeId )
{
if( activeId === evt.target.id )
{
activeId = null;
return false;
}
// collapse previously opened <summary>
// document.getElementById( activeId ).click();
document.getElementById( activeId )
.parentElement.removeAttribute( "open" );
}
activeId = evt.target.id;
});
});
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run