CSS accordion menu with pictures - Jquery

Prest89
August 28, 2022
220 views
0 votes
2 Answers

Can someone pls assist me with a means of performing the following
using jQuery?

Currently, I have some images in a div container, and as for a specific background I have to use the position: absolute. My goal is to implement an according menu where the user clicks the "Menu+" image button, the image
button then toggles back to "Menu-".

Here what I have done:

body{
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}

.openmenu{
   position:fixed;  
   margin:0 auto; 
   width:300px; 
   overflow-y:auto;
   overflow-x: hidden;
}

.img1 {
   position: absolute;
   top: 0px;
   left: 18px;
   z-index: -1;
}


.img2 {
   position: absolute;
   top: 102px;
   left: 18px;
}

.img3 {
   position: absolute;
   top: 217px;
   left: 18px;
}

#pic-wrapper{
margin:2em auto;
position:absolute;
cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<body>
<div id="pic-wrapper">

<div class="img1">            
    <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
    <img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" id="pic-inner">
</div>

<div class="img2">
    <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
    <img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" id="pic-inner">
</div>

<div class="img3">
    <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
    <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" id="pic-inner">
</div>
</div>

Here the result I would like to create:

Example

Any help/direction would be much appreciated.
Thanks.

Answers

$('.accordion-section-title').click(function(e) {
  var currentAttrvalue = $(this).attr('href');

  if ($(e.target).is('.active')) {
    $(this).removeClass('active');
    $('.accordion-section-content:visible').slideUp(300);

  } else {
    $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
    $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
  }
});

.accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: #4c4c4c;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: grey;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
  background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">
      <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">

    </a>
    <div id="accordion-1" class="accordion-section-content">
      <p>This is first accordion section</p>
    </div>
    <a class="accordion-section-title" href="#accordion-2">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
    </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> this is second accordian section</p>
    </div>
    <a class="accordion-section-title" href="#accordion-3">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
    </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> this is third accordian section</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: #4c4c4c;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: grey;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
  background-image:url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
</style>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">
      <img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
    </a>
    <div id="accordion-1" class="accordion-section-content">
      <p>This is first accordion section</p>
    </div>
    <a class="accordion-section-title" href="#accordion-2">
      <img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
    </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> this is second accordian section</p>
    </div>
    <a class="accordion-section-title" href="#accordion-3">
      <img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
    </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> this is third accordian section</p>
    </div>
  </div>
</div>
<script>
$('.accordion-section-content').hide();
$('.accordion-section-title').click(function(e) {
  $('.accordion-section-content').hide();
  var currentAttrvalue = $(this).attr('href');
  if($(this).hasClass('active'))
  {
     $(this).removeClass('active');
  }
  else
  {
    $(this).addClass('active');
  }
  $(currentAttrvalue).slideToggle();
});
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS accordion menu with pictures – Jquery

Answers