We Keep Coding

How can I change between a Login/Sign up Form?

I'm doing a project where I have to create a website. Currently I am making the Login/Sign up Form, however I don't know how to change between them using a link.
This is my html code for it:
<div class="container">
<form class="form--unhidden" id="Login">
[...some code is meant to be here to input username/password input + continue button]
<p class="form__text" id="ToCreateAccount">
<a class="form__link" href="#ChangeCreateAccount" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="CreateAccount">
[...some code is meant to be here to create username/password input + continue button]
<p class="form__text" id="ToLogin">
<a class="form__link" href="#ChangeLogin" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
This is my JavaScript for the code:
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#Login");
const createAccountForm = document.querySelector("#CreateAccount");
,
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#ToLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
I've tried to solve this by adding an id to the class="form__text" line and then connect it to the javascript, and also add # or/and "link" to inside the brackets (e.g. #ToCreateAccount).
document.querySelector("#ToCreateAccount").addEventListener("click", e => {
I believe that the problem is that the JavaScript doesn't fully know what's meant to chance, but I can't figure out how to make it understand it.
Hope this is understandable.
Thank you so much for your help.

You were close. I'm guessing your original code should have had this part:
document.querySelector("#ToCreateAccount").addEventListener("click", e => {
right after this part:
const createAccountForm = document.querySelector("#CreateAccount");
Please take a look at the following example. I've added some of the missing elements, and some simple CSS.
document.addEventListener("DOMContentLoaded", function() {
var create = document.getElementById("linkCreateAccount");
var haveAcc = document.getElementById("linkLogin");
var formLogin = document.getElementById("Login");
var formCreateAcc = document.getElementById("CreateAccount");
create.addEventListener("click", function(e) {
e.preventDefault();
hide(formLogin);
show(formCreateAcc);
});
haveAcc.addEventListener("click", function(e) {
e.preventDefault();
show(formLogin);
hide(formCreateAcc);
});
});
function hide(elem) {
elem.classList.add("form--hidden");
elem.classList.remove("form--unhidden");
}
function show(elem) {
elem.classList.add("form--unhidden");
elem.classList.remove("form--hidden");
}
.container {
padding: 15px;
background-color: #ccc;
font-family: 'Arial','Calibri',sans-serif;
}
.form--unhidden {
display: block;
}
.form--hidden {
display: none;
}
label, input {
display: block;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 3px;
margin-bottom: 3px;
padding: 4px;
}
a.form__link {
text-decoration: none;
transition: 0.5s;
}
button {
margin-top: 5px;
padding: 4px 8px;
border-radius: 3px;
border: 1px solid transparent;
background-color: rgb(9, 100, 170);
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
outline-style: none;
outline-width: 0px;
overflow-wrap: break-word;
position: relative;
text-align: center;
}
a.form__link:hover {
color: #aa5810;
}
<div class="container">
<form class="form--unhidden" id="Login" action="loginPage" method="POST">
<div class="form-inputs">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-inputs">
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">
</div>
<div class="form-inputs">
<button type="submit">Login</button>
</div>
<p class="form__text" id="ToCreateAccount">
<a class="form__link" href="#CreateAccount" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="CreateAccount" action="registerPage" method="POST">
<div class="form-inputs">
<label for="newUsername">Username:</label>
<input type="text" id="newUsername" name="newUsername">
</div>
<div class="form-inputs">
<label for="newPass">Password:</label>
<input type="text" id="newPass" name="newPass">
</div>
<div class="form-inputs">
<label for="againPass">Retype password:</label>
<input type="text" id="againPass" name="againPass">
</div>
<div class="form-inputs">
<label for="newEmail">Username:</label>
<input type="text" id="newEmail" name="newEmail">
</div>
<div class="form-inputs">
<button type="submit">Register</button>
</div>
<p class="form__text" id="ToLogin">
<a class="form__link" href="#ChangeLogin" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
The hiding / showing is handled similar to what you were trying to do, I just placed it in a function.

Modifying JS pager - how to substitute html elements using JQuery

Here is the initial code:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
</div>
</div>
Now the pager file calls:
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, options.startPage, options.perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
where contentHolder is 'fs-table-content', and it points to a template:
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
##courseName##
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="##lessons##" />
<label for="##lessons##">##lessons##
</label>
</div>
</div>
</script>
and it yields:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
Art/Music/Social Media
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="What is art?">
<label for="What is art?">What is art?
</label>
</div>
</div>
</div>
So you see, calling the function "template" simply returns html code. Now, when I click on the next page number, I expect the html to change but it doesn't change, it stays the same because
<div id="fs-table-content">
</div>
has been replaced. How do I inject fs-table-content back into the code. It should be put in the page onclick code:
$('#' + pager).on('click', '.page, .last-page, .first-page, .next-pages, .prev-pages', function(e) {
var newPage = parseInt($(this).data('value'));
var perPage = parseInt($('#' + pager + ' .perPage').val());
$('#' + pager + ' .page.current').removeClass('current');
$('#' + pager + ' .page[data-value="' + newPage + '"]').addClass('current');
showProperPaging(pager, newPage, options.totalPages, options.pagesToShow);
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, newPage, perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
options.currentPage = newPage;
$('#' + pager).trigger("pagingChange");
});
I noticed that in the demo for the pager, they use the following line to change the html:
var showing = $('#' + templateToShow).html().format(data);
html += showing;
But my data is structured differently, I don't think I can use .format

The way this script has been designed is that you need to provide two separate divs (not nested within one another). One for your content and one of its content (where it places pagination, search .. etc).
So you can change your code to this for it work:
!function(a){function e(e,t,r,n,o,s,g){var p="",l=Math.ceil(t/r);p+='<div class="showing"></div>',p+='<div class="pager"><span class="first-page btn" data-value="1">First</span><span class="prev-page btn">Previous</span><span class="prev-pages btn" data-value="1">...</span><span class="page btn current" data-value="1">1</span>';for(var i=1;i<l;i++)p+='<span class="page btn" data-value="'+(i+1)+'">'+(i+1)+"</span>";p+='\t<span class="next-pages btn" data-value="6">...</span><span class="next-page btn">Next</span><span class="last-page btn" data-value="'+l+'">Last</span></div>',p+='<div class="options" style="text-align: center; margin-bottom: 10px;"><span>Show </span><select class="perPage">';for(i=0;i<n.length;i++)n[i]==r?p+='<option selected="selected">'+n[i]+"</option>":p+="<option>"+n[i]+"</option>";p+="\t</select><span> per page</span></div>",s&&(p+='<div class="searchBox"><input type="text" class="search" placeholder="Search" value="'+g+'" /></div>'),a("#"+e).html(p)}function t(e,t,r,n){1==t?a("#"+e).find(".prev-page").hide():a("#"+e).find(".prev-page").show(),t==r?a("#"+e).find(".next-page").hide():a("#"+e).find(".next-page").show();var o,s,g=n,p=Math.ceil(g/2),l=Math.floor(g/2);r<g?(o=0,s=r):t>=1&&t<=p?(o=0,s=g):t+l>=r?(o=r-g,s=r):(o=t-p,s=t+l),a("#"+e+" .pager").children().each(function(){a(this).hasClass("page")&&a(this).hide()});for(var i=o;i<s;i++)o>0?(a("#"+e+" .prev-pages").show(),a("#"+e+" .prev-pages").data("value",o)):a("#"+e+" .prev-pages").hide(),a("#"+e+" .page[data-value='"+(i+1)+"']").show(),s<r?(a("#"+e+" .next-pages").show(),a("#"+e+" .next-pages").data("value",s+1)):a("#"+e+" .next-pages").hide();1==r?a("#"+e+" .last-page, #"+e+" .first-page").hide():0==r?a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").hide():(a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").show(),a("#"+e+" .last-page, #"+e+" .first-page").show())}function r(e,t,r,n,o,s,g,p){var l="",i=n*o-(o-1),h=n*o>r.length?r.length:n*o;if(r.length<=0){if(""==p)l+='<div class="dataError">There is nothing to show here.</div>';else l+=a("#"+p).html().format(["There are no Messages to display."]);return s||a("#"+e).hide(),l}a("#"+e).show(),a("#"+e+" .showing").html("Showing "+i+" to "+h+" of "+r.length+" total.");for(var c=n*o-o;c<n*o&&c!=r.length;c++){var u=[];a.each(g,function(a,e){u.push(r[c][e])}),l+=a("#"+t).html().format(u)}return l}a.fn.extend({paging:function(n){var o={data:{},contentHolder:"",template:"",errorTemplate:"",informationToShow:[],informationToRefineBy:[],perPage:10,pageLengths:[5,10,20,30,40,50],startPage:1,pagesToShow:5,showOptions:!0,showSearch:!0,alwaysShowPager:!0},s={currentPage:o.startPage,totalPages:0,currentData:n.data,refine:""};n=a.extend(o,n),(n=a.extend(s,n)).totalPages=Math.ceil(n.currentData.length/n.perPage),function(n,o){o.totalPages;e(n,o.currentData.length,o.perPage,o.pageLengths,o.showOptions,o.showSearch,o.refine),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,o.perPage,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).on("click",".page, .last-page, .first-page, .next-pages, .prev-pages",function(e){var s=parseInt(a(this).data("value")),g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".next-page",function(e){var s=o.currentPage+1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".prev-page",function(e){var s=o.currentPage-1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("change",".perPage",function(s){var g=parseInt(a(this).val());e(n,o.data.length,g,o.pageLengths,o.showOptions,o.showSearch,o.refine),o.totalPages=Math.ceil(o.currentData.length/g),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=o.startPage,a("#"+n).trigger("pagingChange")}),a("#"+n).on("keyup",".search",function(e){var s=parseInt(a("#"+n+" .perPage").val()),g=a(this).val();o.refine=g;var p=function(e,t,r){if(""==t)return;var n=t.toLowerCase();dataToKeep=[];for(var o=0;o<e.length;o++)a.each(r,function(a,t){if(null!=e[o][t]&&e[o][t].toLowerCase().indexOf(n)>=0)return dataToKeep.push(e[o]),!1});return dataToKeep}(o.data,g,o.informationToRefineBy);p||(p=o.data),o.currentData=p;var l=Math.ceil(o.currentData.length/s);o.totalPages=l,t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,s,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).trigger("pagingChange")}),a("#"+n).on("focusin",".search",function(){o.refineFocus=!0}),a("#"+n).on("focusout",".search",function(){o.refineFocus=!1})}(a(this).attr("id"),n)}})}(jQuery),String.prototype.format=function(){var a=arguments;return this.replace(/{(\d+)}/g,function(e,t){return void 0!==a[0][t]?a[0][t]:e})};
$(document).ready(function() {
var data = [{
"firstname": "John",
"lastname": "Smith"
}, {
"firstname": "Jane",
"lastname": "Doe"
}, {
"firstname": "James",
"lastname": "Smith"
}, {
"firstname": "Amanda",
"lastname": "Doe"
}, {
"firstname": "Billy",
"lastname": "Joe"
}];
$('#fs-table-table').paging({
data: data, //This is the data that is being used. It is using JSON data so you can pull from any source if you want.
contentHolder: 'fs-table-content', //The id for the area where you want the data to be displayed.
template: 'weeklyLessonTemplate', //The template that is being used to display the data.
errorTemplate: 'contentErrorTemplate', //The error template that is being used (optional)
informationToShow: ['firstname', 'lastname'], //The information that you want to show from the given data
informationToRefineBy: ['firstname', 'lastname'], //The information that you want to search on from the given data
perPage: 1, //Default number to show per page. (Since we have a small amount of data only show 1.)
pageLengths: [1, 2, 3, 4], //Options for number of items per page.
startPage: 1, //The default start page. (Better to leave as 1 but can be changed if desired).
pagesToShow: 4, //Number of pages to show at the top. If you have 10 pages it will show [...] when going above or below the this number.
showOptions: true, //Show the per page options.
showSearch: true, //Show the search bar.
alwaysShowPager: true //Show the pager even if there isn't any data. Should be true if showSearch is true otherwise there will be problems.
});
});
.pager span.current {
border: red;
border-radius: 5px;
font-weight: bold;
color: red;
}
.dataError {
width: 100%;
font-size: 20px;
text-align: center;
padding: 10px;
}
.searchBox {
width: 300px;
margin: 0 auto;
}
.searchBox .search {
width: 100%;
height: 30px;
}
.showing {
width: 100%;
text-align: center;
}
.dropdown:hover .dropdown-menu { display: block; }
.pager span {
border-radius: 5px;
border: #a6a6a8 1px solid;
padding: 5px 14px;
margin: 0 3px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.pager span:hover { background-color: #ddd; }
.pager span.current:hover {
background-color: #fff;
cursor: default;
}
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fs-table-content"></div>
<div id="fs-table-table"></div>
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
{0}
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="{1}" />
<label for="{1}">{1}</label>
</div>
</div>
</div>
</script>

Several conditions filter on javascript/jquery

I am stuck with this problem. There is a simple filter and it works not exactly the way I need it: http://jsfiddle.net/qyy810xx/
CSS here:
.categorya, .categoryb, .categoryrko {
width: 30px;
height: 20px;
line-height:20px;
text-align:center;
background: red;
margin: 10px;
float: left;
font-size:11px;
color:white;
font-family:sans-serif;
}
.categoryb {
background: blue;
}
.categorya.categoryb{
background:purple;
}
p.info{
padding:30px 20px 0 20px;
color:#666;
font-family:sans-serif;
font-size:13px;
}
HTML:
<ul id="filters">
<li>
<input type="checkbox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input type="checkbox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
<li>
<input type="checkbox" value="categoryrko" id="filter-categoryrko" />
<label for="filter-categoryrko">RKO</label>
</li>
</ul>
<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryrko">RKO</div>
<div class="categoryb categoryrko">BRko</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
And script:
$("#filters :checkbox").click(function() {
var re = new RegExp($("#filters :checkbox:checked").map(function() {
return this.value;
}).get().join("|") );
$("div").each(function() {
var $this = $(this);
$this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
If select categoryB we can see ONLY divs with categoryB class, but i need to see all divs, including categoryB class.
e.g. if you select categoryA it must display [A,B] block, all [A] blocks and [RKOa] block, but if you select categoryA AND categoryRKO it must show ONLY [RKOa] block. i.e. only a block that satisfies all parameters.
I will be glad to any help

You need not make a regular expression, just formulate a selector using the same logic
$("#filters :checkbox").click(function() {
var selector = $("#filters :checkbox:checked").map(function() {
return "." + this.value;
}).get().join(",");
$("div").hide().filter(selector).show(); //now show only those which are matching the selector chosen above
});

I know what you're trying to do. But be honest your code was really hard for other to read. So I decided to come up with a better solution and easy for everyone to know what I'm trying to do when they're reading code.
The idea is: Every times you check a checkbox.
You map through all checkboxes and push the value of checked checkbox into an array.
Then hide all div
And finally loop through an array and show the checked one.
Here is modified code of your's. :) Hope it can give you a idea.
$(".filter-checkbox").click(function() {
var checkboxes = $('.filter-checkbox');
var checkedClasses = [];
//Map and get all checked category
var activeCheckboxes = checkboxes.each(function(index,checkbox){
if(checkbox.checked)
checkedClasses.push(checkbox.value);
});
//Hide all category
$('.category').hide();
//Show only checked
$.each(checkedClasses,function(index,className){
$('.' + className).show();
})
});
.categorya, .categoryb, .categoryrko {
width: 30px;
height: 20px;
line-height:20px;
text-align:center;
background: red;
margin: 10px;
float: left;
font-size:11px;
color:white;
font-family:sans-serif;
}
.categoryb {
background: blue;
}
.categorya.categoryb{
background:purple;
}
p.info{
padding:30px 20px 0 20px;
color:#666;
font-family:sans-serif;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters">
<li>
<input class="filter-checkbox" type="checkbox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input class="filter-checkbox" type="checkbox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
<li>
<input class="filter-checkbox" type="checkbox" value="categoryrko" id="filter-categoryrko" />
<label for="filter-categoryrko">RKO</label>
</li>
</ul>
<div class="category categorya categoryb">A, B</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categoryrko">RKO</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<br />
<p class="info">
- If you select Category A: four boxes will apear [A,B] [A] [A] [A]
<br/><br/>
- Then if you select Category B and deselect it again: the purple box [A,B] will disapear because the script commands to hide 'B'.
<br/><br/>
- But I don't want the script to hide box 'B' when it also contains 'A'..
</p>

Hide tab based on language selection

I'm trying to hide the other tab (the label and the tab itself) when a language is selected.
I can't understand what I'm doing wrong, I tried to change different times the code but there is something I cant get. It also doesn't give me any error in the console.
Can anybody point me to the right direction?
$(document).ready(function () {
showtabs();
jQuery('#language').on('change', showtabs());
function showtabs() {
jQuery('.tab_header a').show();
jQuery('.tab_form_lang').show();
var valueSelected = jQuery("#language option:selected").val();
if (valueSelected != 0) {
jQuery('.tab_header').find('a').hide();
jQuery('.tab_form_lang').hide();
jQuery('a[langid=' + valueSelected + ']').show();
jQuery('.tab_form_lang[langid=' + valueSelected + ']').show();
}
}
})
.tab_header a {
float: left;
width: auto;
height: 50px;
line-height: 50px;
padding-left: 15px;
padding-right: 15px;
color: #FFF;
font-size: 15px;
margin-right: 2px;
background-color: #788288;
text-transform: uppercase;
}
.tab_form.displaynone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select class="form-control" default="0" request="0" initvalue="0" id="language" name="lingua" onchange="resetStepSelect(this.id)">
<option selected="selected" value="0">ALL ( default )</option>
<option value="1">Italian</option>
<option value="2">English</option>
</select>
<div class="tab_header col-sm-offset-2 nopadding_right col-sm-10">
<a class="selected" langid="1" id="tab_lang_0" href="javascript:changeTab(0)" title="" data-original-title="Italian" style="display: block;">Italian</a>
<a langid="2" id="tab_lang_1" href="javascript:changeTab(1)" title="" data-original-title="English" style="display: none;">English</a>
</div>
<div langid="1" class="tab_form tab_form_lang col-sm-12" id="tab_form_0" style="display: block;">
the content of the tab with langid=1
</div>
<div langid="2" class="tab_form tab_form_lang col-sm-12 displaynone" id="tab_form_1" style="display: block;">
the content of the tab with langid=2
</div>

Change this line :
jQuery('#language').on('change', showtabs());
to :
jQuery('#language').on('change', showtabs);
A recommendation
try to use
jQuery('a[langid="' + valueSelected + '"]')...
instead jQuery('a[langid=' + valueSelected + ']')...

Unable to make button show or hide depending on whether another element has content

So this is probably a simple question. But I have to ask because it's not doing what I want.
Here is the button JavaScript:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
});
The button is shown if there is content in the div. But I would like it to hide again if the div has no content.
I tried:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
if ($(".saved-items").html().length < 0) {
$('.btn-01').hide();
}
});
Here is the HTML when an item is added:
<div class="col-sm-2">
<div class="saved-items"><h4>Items:</h4>
<ul>
<li><i class="fa fa-anchor" aria-hidden="true" style="color:#f60;margin-right:10px;"></i>RAW</li>
</ul>
<script>
$(document).ready(function(){
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
});
</script>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div style="display: block;" class="btn-01">Check Out</div></a>
</div>
</div>
And this is the HTML without any items saved:
<div class="col-sm-2">
<div class="saved-items">
<h4>Items:</h4>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div class="btn-01">Check Out</div></a>
</div>
But no go. Here is the CSS of btn-01:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px !important;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
display: none;
border:none;
}

You can use toggle() to achieve this:
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
Working example

length of string is zero or greater than zero..can't be less than zero.
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}else{
$('.btn-01').hide();
}
});
please check https://jsfiddle.net/Shilpi/uhfruo1a/2/