1

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.

Screenshot

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>

1 Answer 1

0

1st in some places in your code your js code you have ` instead of ' when selecting elements like in :

htag.style.borderBottom = `1.5px solid green`
// should be
htag.style.borderBottom = '1.5px solid green'

Fix that! You need 1 small fix in the code about sliding problem

headingTag.addEventListener('click', () => {
  document.body.setAttribute("data-theme", "blur");
  slidingContent.style.transform = "translateX(0)";
  slidingContent.style.display = 'block';
})

backIcon.addEventListener('click', () => {
  slidingContent.style.transform = "translateX(120%)";
  document.body.removeAttribute("data-theme", "blur");
});

About your 2nd issue, this line you see is actually a margin from h1 tag inside the sliding content so just add this to remove it:

....
    </div>
    // set margin top to 0
    <h1 style="margin-top:0!important;">SEO Specialist Needed</h1>
    <div class="job-description-slide">
....

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.