Функция Onclick на основе идентификатора элемента вместо css

Question

Пыталась сама изменить идентификатор css на id но ничего не выходит. Ситуация в том когда на одной странице дублируется несколько таких блоков при нажатии open раскрываются все блоки. При дублировании каждому блоку присваивается уникальный id через <?php the_ID(); ?> но как я не старалась привязать скрипт к id не виходить, подскажите пожалуста как решить!

        $('.readmore').click(function() {
          $('.content').toggleClass('full');
          $('.header').toggleClass('collapse');
          $('.readmore').toggle();
        });
        $('.closete').click(function() {
          $('.content').removeClass('full');
          $('.header').removeClass('collapse');
          $('.readmore').toggle();
        });

.flex {
     min-height: 72vh;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .img {
     min-width: 100%;
     max-width: 100%;
     height: auto;
}
 .card {
     margin: 0px 0px;
     width: 380px;
     height: 600px;
     position: relative;
     z-index: 1;
     border-radius: 6px;
     overflow: hidden;
     background-color: #fff;
     box-shadow: 0 19px 48px rgba(0, 0, 0, 0.30), 0 15px 32px rgba(0, 0, 0, 0.22);
}
 .card .header {
     height: 200px;
     width: 100%;
     position: relative;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
 .card .header.collapse {
     height: 0px;
}
 .card .header .title {
     height: 200px;
     display: flex;
     align-items: center;
     text-align: center;
     justify-content: center;
     padding: 0px 15px;
}
 .card .header .title h1 {
     margin: 0px;
     font-size: 22px;
     color: rgba(255, 255, 255, 0.8);
}
 .card .header .title h6 {
     font-size: 16px;
     color: #644cad;
     margin: 0;
}
 .card .header .title h6 span {
     color: #fff;
}
 .card .header:after {
     content: '';
     display: block;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 380px;
     height: 34px;
    
}
 .card .content {
     height: 400px;
     width: 100%;
     overflow-x: hidden;
     padding: 20px 30px 30px 30px;
     position: relative;
     background-color: #fafafa;
     overflow-y: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
 .card .content.full {
     height: 600px;
     overflow-y: scroll;
}
 .card .content.full .articlemeta {
     transform: translateY(30px);
     opacity: 0;
}
 .card .content.full .closebar {
     opacity: 1;
     transform: translateY(0px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
 .card .content.full .closebar h1 {
     opacity: 1;
}
 .card .content .closebar {
     padding: 0px 20px;
     transform: translateY(-30px);
     opacity: 0;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
     position: absolute;
     width: 100%;
     height: 50px;
     line-height: 50px;
     background-color: #fff;
     top: 0;
     left: 0;
     border-bottom: 1px solid #eee;
}
 .card .content .closebar .closebttn {
     position: absolute;
     right: 15px;
     top: -2px;
}
 .card .content .closebar h1 {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
     opacity: 0;
     margin: 0px;
     padding: 0px;
     color: #333;
     font-weight: bold;
     font-size: 18px;
}
 .card .content .articlemeta {
     position: absolute;
     z-index: 99999;
     background: #fff;
     bottom: 0;
     left: 0;
     right: 0;
     padding-left: 3px;
     border-top: 1px solid #eee;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
 .card .content .articlemeta:before {
     position: absolute;
     content: '';
     height: 40px;
     width: 100%;
     top: -41px;
     background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
}
 .card .content .articlemeta ul {
     list-style-type: none;
     margin: 0px;
     padding: 0px;
}
 .card .content .articlemeta ul.left {
     float: left;
}
 .card .content .articlemeta ul.left li {
     border-right: 1px solid #eee;
}
 .card .content .articlemeta ul.right {
     float: right;
}
 .card .content .articlemeta ul.right li {
     border-left: 1px solid #eee;
}
 .card .content .articlemeta ul li {
     display: inline-block;
     padding: 12px 15px 16px;
     cursor: pointer;
}
 .card .content .articlemeta ul li:hover .material-icons {
     color: #644cad;
}
.card .content .bttn {
    padding: 13px 34px;
    text-align: center;
    border-radius: 3px;
    background-color: #1e76e3;
    text-decoration: none;
    color: #fff;
    transition: 300ms all;
}
 .card .content .bttn:hover {
     background-color: #1a6ace;
}
 .card .content .readmore {
     position: absolute;
     display: block;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     transition: 300ms all;
     color: #333;
}
 .card .content .readmore:after {
     opacity: 0;
     text-align: center;
     content: 'open';
     font-size: 22px;
     position: absolute;
     display: block;
     width: 50%;
     padding: 10px 25px;
     background-color: #eee;
     border: 1px solid #ddd;
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
     top: 150px;
     transition: 300ms all;
     transform: translateY(20px);
}
 .card .content .readmore:hover:after {
     opacity: 1;
     transform: translateY(0px);
     box-shadow: rgba(65, 92, 105, 0.0588235) 0px 1.5px 13px;
}
 .card .content p {
     color: rgba(0, 0, 0, 0.5);
}
 .card .content p:first-of-type {
     margin-top: 0px;
}
 @media (max-width: 767px) {
     .card .content .readmore:after {
         opacity: 1;
         text-align: center;
         content: 'open';
         font-size: 22px;
         color: #eee;
         position: absolute;
         display: block;
         width: 50%;
         padding: 10px 13px;
         background-color: #333;
         border: 1px solid #555;
         left: 0;
         right: 0;
         margin-left: auto;
         margin-right: auto;
         top: 150px;
         transition: 300ms all;
         transform: translateY(0px);
    }
}
.label-title {
    background: #ff850c;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 4px;
    width: auto;
    min-width: 140px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 172px;
    left: 2px;
    transform: rotate(0deg);
}

<div class="flex">
  <div class="card">
    <div class="header">
        <div class="title">
          <div>
            <h1></h1>
            <h6><span>by</span>title</h6>
          </div>
      </div>
    </div>
    <div class="content">
      <div class="articlemeta">
        <ul class="left">
          <li><i class="material-icons"></i></li>
          <li><i class="material-icons"></i></li>
        </ul>
        <ul class="right">
          <li><span class="material-coment"></span></li>
        </ul>
      </div>
      <div class="closebar">
           <a href="#0" class="bttn"></a>
          <a href="#0" class="closete"><span class="material-close"></span>closete</a>
        </div>
      <p>
content
</p>
<div id="content" class="list-post">
    <div class="tex-post">
     <a href="#0" class="readmore"></a>
     </div>
     </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" id="bp-verified-member-js"></script>

Answer 1

Удалил прошлое сообщение, не так понял. Попробуйте скрипт:

    $(document).ready(function() {
  $('.readmore').click(function() {
    $(this).closest('.content').toggleClass('full'); 
    $(this).closest('.card').find('.header').toggleClass('collapse'); 
    $(this).toggle(); 
  });

  $('.closete').click(function() {
   
    $(this).closest('.content').removeClass('full'); 
    $(this).closest('.card').find('.header').removeClass('collapse'); 
    $(this).closest('.content').find('.readmore').toggle(); 
  });
});

БЛОГ НА HUSL

Функция Onclick на основе идентификатора элемента вместо css

Ответы (1 шт):