toggle div function with chevron up down toggle

showing an example of chevron toggles kinda like a manual accordion

Demo

CSS


@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap');
* {
  font-family: 'Red Hat Display', sans-serif;
}
a {

}
.clickbox {
    border-bottom: 1px solid #ece6ed;
    margin-bottom: 18px;
    padding-bottom: 18px;
    max-width:400px;
    margin:0 auto;
}
.click-target {
  display:none;
}
a.click-title {
  font-size:22px;
  text-decoration:none;
  color:green;
}
.chev_up {
    background: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLXVwIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hldnJvbi11cCBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTI0MC45NzEgMTMwLjUyNGwxOTQuMzQzIDE5NC4zNDNjOS4zNzMgOS4zNzMgOS4zNzMgMjQuNTY5IDAgMzMuOTQxbC0yMi42NjcgMjIuNjY3Yy05LjM1NyA5LjM1Ny0yNC41MjIgOS4zNzUtMzMuOTAxLjA0TDIyNCAyMjcuNDk1IDY5LjI1NSAzODEuNTE2Yy05LjM3OSA5LjMzNS0yNC41NDQgOS4zMTctMzMuOTAxLS4wNGwtMjIuNjY3LTIyLjY2N2MtOS4zNzMtOS4zNzMtOS4zNzMtMjQuNTY5IDAtMzMuOTQxTDIwNy4wMyAxMzAuNTI1YzkuMzcyLTkuMzczIDI0LjU2OC05LjM3MyAzMy45NDEtLjAwMXoiPjwvcGF0aD48L3N2Zz4=) right center no-repeat;
    display:block;
}
.chev_down {
    background: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLWRvd24iIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1jaGV2cm9uLWRvd24gZmEtdy0xNCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMDcuMDI5IDM4MS40NzZMMTIuNjg2IDE4Ny4xMzJjLTkuMzczLTkuMzczLTkuMzczLTI0LjU2OSAwLTMzLjk0MWwyMi42NjctMjIuNjY3YzkuMzU3LTkuMzU3IDI0LjUyMi05LjM3NSAzMy45MDEtLjA0TDIyNCAyODQuNTA1bDE1NC43NDUtMTU0LjAyMWM5LjM3OS05LjMzNSAyNC41NDQtOS4zMTcgMzMuOTAxLjA0bDIyLjY2NyAyMi42NjdjOS4zNzMgOS4zNzMgOS4zNzMgMjQuNTY5IDAgMzMuOTQxTDI0MC45NzEgMzgxLjQ3NmMtOS4zNzMgOS4zNzItMjQuNTY5IDkuMzcyLTMzLjk0MiAweiI+PC9wYXRoPjwvc3ZnPg==) right center no-repeat;
    display:block;
}

JS


function toggle(div_id) {
  console.log(div_id);
  $(div_id).slideToggle();
  $(div_id + "t").toggleClass("chev_up chev_down");
}

$(document).ready(function() {
  $(".click-title").addClass("chev_up");
});

HTML

<div class="clickbox">
<p><a class="click-title chev_up" id="c1t" onclick="toggle('#c1');" href="#!">A Question</a></p>
<p id="c1" class="click-target">Bacon ipsum dolor amet tri-tip strip steak pork loin turducken burgdoggen cow pork belly swine andouille. Jowl leberkas pig venison chicken sirloin tri-tip spare ribs flank beef pork filet mignon shank. Bacon turducken venison, ground round tenderloin meatball flank shankle pork loin porchetta. Flank brisket beef ribs chuck filet mignon ball tip strip steak shank kevin pastrami pork loin landjaeger salami prosciutto pancetta.</p>
</div>

<div class="clickbox">
<p><a class="click-title chev_up" id="c2t" onclick="toggle('#c2');" href="#!">A Question</a></p>
<p id="c2" class="click-target">Bacon ipsum dolor amet tri-tip strip steak pork loin turducken burgdoggen cow pork belly swine andouille. Jowl leberkas pig venison chicken sirloin tri-tip spare ribs flank beef pork filet mignon shank. Bacon turducken venison, ground round tenderloin meatball flank shankle pork loin porchetta. Flank brisket beef ribs chuck filet mignon ball tip strip steak shank kevin pastrami pork loin landjaeger salami prosciutto pancetta.</p>
</div>

Working Result

A Question

Bacon ipsum dolor amet tri-tip strip steak pork loin turducken burgdoggen cow pork belly swine andouille. Jowl leberkas pig venison chicken sirloin tri-tip spare ribs flank beef pork filet mignon shank. Bacon turducken venison, ground round tenderloin meatball flank shankle pork loin porchetta. Flank brisket beef ribs chuck filet mignon ball tip strip steak shank kevin pastrami pork loin landjaeger salami prosciutto pancetta.

A Question

Bacon ipsum dolor amet tri-tip strip steak pork loin turducken burgdoggen cow pork belly swine andouille. Jowl leberkas pig venison chicken sirloin tri-tip spare ribs flank beef pork filet mignon shank. Bacon turducken venison, ground round tenderloin meatball flank shankle pork loin porchetta. Flank brisket beef ribs chuck filet mignon ball tip strip steak shank kevin pastrami pork loin landjaeger salami prosciutto pancetta.

Page Views

This page has been viewed 34 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹