If you've used upwork you might be familiar with their UI.
Here I tried to make it's small feature when when user clicks on any freelance job offer, another page opens from left side transform: translate(120%)
to transform: translate(0)
Problem is that when I click on job header sliding from right to left works perfectly fine but when I do this same thing second time, sliding is not working. and also when slide comes from right to left there's grayish bar appears on right side of the page. I don't know what I am doing if You are satisfied with my explanation I'll try to more detailed about it.
const jobContainer = document.querySelector('.job-description');
let htag = document.querySelector('.green-h3');
function changeCol() {
htag = document.querySelector('.green-h3');
htag.style.color = "green"
}
function normalCol() {
let htag = document.querySelector('.green-h3');
htag.style.color = "black"
htag.style.borderBottom = `none`
}
htag.addEventListener('mouseover', ()=> {
htag.style.borderBottom = `1.5px solid green`
});
// show more
let hiddenInfo = document.querySelector('.by-default-hidden');
let more = document.querySelector('.more');
let less = document.querySelector('.less');
less.style.display = 'none'
more.addEventListener('click', ()=> {
hiddenInfo.style.display = 'inline'
more.style.display = 'none'
less.style.display = 'inline'
})
less.addEventListener('click', ()=> {
hiddenInfo.style.display = 'none'
more.style.display = 'inline'
less.style.display = 'none'
})
// sliding
let headingTag = document.querySelector('.green-h3');
let slidingParent = document.querySelector('.container-job-slide')
let slidingContent = document.querySelector('.slide-jobs');
let jobSectionmain = document.querySelector('.jobs');
let backIcon = document.querySelector('.back-icon');
headingTag.addEventListener('click', ()=> {
document.body.setAttribute("data-theme", "blur")
if (headingTag) {
slidingContent.style.display = 'block';
} else {
slidingContent.style.display = 'none';
}
})
backIcon.addEventListener('click', ()=> {
slidingContent.style.transform = `translateX(120%)`;
document.body.removeAttribute("data-theme", "blur");
});
body {
max-width: 990px;
overflow-x: hidden;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: #F1F2F4;
margin: 0 auto;
}
body[data-theme="blur"] {
background-color: rgb(87, 87, 87);
}
.jobs {
position: relative;
}
.container-job {
max-width: 630px;
position: relative;
}
h1 {
padding: 20px 10px 20px 40px;
background-color: white ;
}
.job-description {
margin-top: -20px;
border-top: 1px solid rgb(194, 194, 194);
padding: 20px 20px 20px 40px;
background-color: white;
color: #656565;
}
.job-description:hover{
color: black;
background-color: #F9F9F9;
cursor: pointer;
}
.more,.less {
color: green;
}
.more:hover,.less:hover {
border-bottom: 1.5px solid green;
cursor: pointer;
}
.green-h3 {
font-size: 1.2rem;
}
.green-h3:hover {
border-bottom: 1.5px solid green;
}
.by-default-hidden {
display: none;
}
/* slide jobs */
.slide-jobs {
top: 0;
position: absolute;
/* */
display: none;
right: 5%;
width: 80%;
transition: all .4s;
animation: slide .4s ease-in;
}
@keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
/* .backSlide {
animation: backSlide .4s ease-in;
}
@keyframes backSlide {
from{
transform: translateX(0%);
}
to {
transform: translateX(120%);
}
} */
.job-description-slide {
margin-top: -20px;
border-top: 1px solid rgb(194, 194, 194);
padding: 20px 20px 20px 40px;
background-color: white;
}
.back-icon div{
height: 4px;
width: 20px;
margin: 5px;
background-color: green;
cursor: pointer;
}
.back-icon {
background-color: white;
padding: 25px;
}
.line1 {
transform: rotate(-30deg);
}
.line2 {
transform: rotate(30deg);
}
<section class="jobs">
<div class="container-job">
<h1>My Feed</h1>
<div
onmouseover="changeCol();"
onmouseout="normalCol()"
class="job-description"
>
<span class="green-h3">SEO Specialist Needed</span>
<h4>
Fixed-price - Expert - Est. Budget: 400$ - Posted 46 minutes ago
</h4>
<p>
Job Description Hello! Our small digital advertising company needs
someone that's starting out in their career that is **VERY** capable
in SEO and web development. Must be able to do a video call and
operate in US Eastern Time. Also must be comfortable with Wordpress.
If you also have some graphic design background and know about
Facebook / Google Ads and could manage those, that's a
<span class="more">more</span>
<span class="by-default-hidden"
>significant plus. Our team also needs someone that's very
comfortable in Wordpress back end HTML / CSS / PHP, and can
essentially create a site from visuals provided. Pay is not
fantastic YET, but it should be once we really have clients coming
through. Must be able to do a video call every now and then, and
video interview on front end. Key summary: we need an SEO expert
to manage search engine optimization and marketing activities. The
SEO Specialist will be responsible for managing all SEO activities
such as keyword strategy, content strategy and link building to
increase organic search rankings and drive search traffic from
Google, Bing, Yahoo and other search engines. A successful SEO
specialist must keep up-to-date with the latest industry best
practices and work closely with editorial and marketing teams to
develop a successful organic search strategy. Responsibilities
Optimize copy and landing pages for search engine optimization
Perform ongoing keyword research and discovery, expansion and
optimization Research and implement search engine optimization
recommendations on the website Research and analyze competitor
content and links Develop and implement link building strategy
Work with the development team to ensure SEO best practices are
properly implemented on newly developed code Work with editorial
and marketing teams to drive SEO in content strategy and creation
Work closely with social media team to align social distribution
and SEO efforts Recommend changes to website architecture,
content, linking and other factors to improve SEO positions for
target keywords Skills Proven SEO experience and a track record of
success growing organic search traffic and conversions Solid
understanding of performance marketing, conversion, and online
customer acquisition Up-to-date with the latest trends and best
practices in SEO and inbound marketing In-depth experience with
website analytics tools (e.g, Google Analytics, NetInsight,
Omniture, WebTrends) Working knowledge of HTML, CSS, and
JavaScript development and constraints Familiarity with content
management systems (e.g, Wordpress, Vignette) BS/MS degree in a
quantitative, test-driven field Job Type: Part-time Pay: From
$20.00 per hour</span
>
<span class="less">Less</span>
</p>
</div>
</div>
</section>
<section class="slide-jobs">
<div class="container-job-slide">
<div class="back-icon">
<div class="line1"></div>
<div class="line2"></div>
</div>
<h1>SEO Specialist Needed</h1>
<div class="job-description-slide">
<span class="green-h3">SEO Specialist Needed</span>
<h4>
Fixed-price - Expert - Est. Budget: 400$ - Posted 46 minutes ago
</h4>
<p>
Job Description Hello! Our small digital advertising company needs
someone that's starting out in their career that is **VERY** capable
in SEO and web development. Must be able to do a video call and
operate in US Eastern Time. Also must be comfortable with Wordpress.
If you also have some graphic design background and know about
Facebook / Google Ads and could manage those, that's a significant
plus. Our team also needs someone that's very comfortable in
Wordpress back end HTML / CSS / PHP, and can essentially create a
site from visuals provided. Pay is not fantastic YET, but it should
be once we really have clients coming through. Must be able to do a
video call every now and then, and video interview on front end. Key
summary: we need an SEO expert to manage search engine optimization
and marketing activities. The SEO Specialist will be responsible for
managing all SEO activities such as keyword strategy, content
strategy and link building to increase organic search rankings and
drive search traffic from Google, Bing, Yahoo and other search
engines. A successful SEO specialist must keep up-to-date with the
latest industry best practices and work closely with editorial and
marketing teams to develop a successful organic search strategy.
Responsibilities Optimize copy and landing pages for search engine
optimization Perform ongoing keyword research and discovery,
expansion and optimization Research and implement search engine
optimization recommendations on the website Research and analyze
competitor content and links Develop and implement link building
strategy Work with the development team to ensure SEO best practices
are properly implemented on newly developed code Work with editorial
and marketing teams to drive SEO in content strategy and creation
Work closely with social media team to align social distribution and
SEO efforts Recommend changes to website architecture, content,
linking and other factors to improve SEO positions for target
keywords Skills Proven SEO experience and a track record of success
growing organic search traffic and conversions Solid understanding
of performance marketing, conversion, and online customer
acquisition Up-to-date with the latest trends and best practices in
SEO and inbound marketing In-depth experience with website analytics
tools (e.g, Google Analytics, NetInsight, Omniture, WebTrends)
Working knowledge of HTML, CSS, and JavaScript development and
constraints Familiarity with content management systems (e.g,
Wordpress, Vignette) BS/MS degree in a quantitative, test-driven
field Job Type: Part-time Pay: From $20.00 per hour
</p>
</div>
</div>
</section>