Tips for effectively closing div elements

Question

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previously opened "p" tag. It currently functions like an onclick toggle for the content.

I attempted to add code that closes all the "p" tags but doesn't revert the image back to the default one with the plus icon.

$('p').hide();

$(this).bind('keypress click', function(e) {
  e.preventDefault();
  $('p').hide();
  var $icon = $(this).find('.icon'); 
  if($icon.hasClass('first-image'))
  {
    $icon.removeClass('first-image').addClass('second-image');
  }
  else
  {
    $icon.removeClass('second-image').addClass('first-image');
  }
  $(this).next('p').slideToggle();
});

<ul class="accor">
  <li><a href="#"><span class="icon second-image"></span> Item 1</a> 
    <p style="display:block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
  <li><a href="#"><span class="icon first-image"></span> Item 2 </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
</ul>

The problem I'm facing is with Item 1 - it closes but the image remains as (--), instead of changing back to (+).

https://i.sstatic.net/1DAB7.jpg

javascript jquery html css

Answer 1

Answer №1

It seems that in order for the code snippet to work correctly, you should consider specifying a as a selector instead of using this.

Here is an example:

$('a').bind('keypress click', function(e) {
  e.preventDefault();
  $('p').hide();
  $('.icon').removeClass('second-image').addClass('first-image');
  var $icon = $(this).find('.icon'); 
  var $p = $(this).next('p').slideToggle();
  if($p.is(':visible'))
  {
    $icon.removeClass('first-image').addClass('second-image');
  }
  else
  {
    $icon.removeClass('second-image').addClass('first-image');
  }
});

li {
  list-style:none;  
}

p {
  display:none;  
}

.icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f067"
}

.icon.second-image:before {
  content:"\f068";  
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accor">
  <li><a href="#"><span class="icon second-image"></span> Item 1</a> 
    <p style="display:block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
  <li><a href="#"><span class="icon first-image"></span> Item 2 </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
</ul>

The code snippet may not be functional here, so I have created a bin for reference:

Answer 2

It seems that in order for the code snippet to work correctly, you should consider specifying a as a selector instead of using this.

Here is an example:

$('a').bind('keypress click', function(e) {
  e.preventDefault();
  $('p').hide();
  $('.icon').removeClass('second-image').addClass('first-image');
  var $icon = $(this).find('.icon'); 
  var $p = $(this).next('p').slideToggle();
  if($p.is(':visible'))
  {
    $icon.removeClass('first-image').addClass('second-image');
  }
  else
  {
    $icon.removeClass('second-image').addClass('first-image');
  }
});

li {
  list-style:none;  
}

p {
  display:none;  
}

.icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f067"
}

.icon.second-image:before {
  content:"\f068";  
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accor">
  <li><a href="#"><span class="icon second-image"></span> Item 1</a> 
    <p style="display:block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
  <li><a href="#"><span class="icon first-image"></span> Item 2 </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li> 
</ul>

The code snippet may not be functional here, so I have created a bin for reference:

Answer 3

Answer №2

$(document).ready(function() {
//ACTION WHEN ACCORDION BUTTON IS CLICKED
    $('.accordionButton').click(function() {

        //REMOVE 'on' CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //CLOSE ALL OPEN SLIDES
        $('.accordionContent').slideUp('normal', function(){
            $(this).prev().find('.img1').removeClass('img2');
        });

        //IF THE CONTENT IS HIDDEN, SHOW IT
        if($(this).next().is(':hidden') == true) {

            //ADD 'on' CLASS TO CLICKED BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal', function(){
                $(this).prev().find('.img1').addClass('img2');
            });
        }
    });

    //HIDE ALL SLIDES ON PAGE LOAD
    $('.accordionContent').hide();
});

Answer 4

$(document).ready(function() {
//ACTION WHEN ACCORDION BUTTON IS CLICKED
    $('.accordionButton').click(function() {

        //REMOVE 'on' CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //CLOSE ALL OPEN SLIDES
        $('.accordionContent').slideUp('normal', function(){
            $(this).prev().find('.img1').removeClass('img2');
        });

        //IF THE CONTENT IS HIDDEN, SHOW IT
        if($(this).next().is(':hidden') == true) {

            //ADD 'on' CLASS TO CLICKED BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal', function(){
                $(this).prev().find('.img1').addClass('img2');
            });
        }
    });

    //HIDE ALL SLIDES ON PAGE LOAD
    $('.accordionContent').hide();
});

Tips for effectively closing div elements

Answer №1

Answer №2

Similar questions

The session becomes obsolete when redirecting back to the previous page

CSS animations are only functional when the Developer Tools are activated

CSS Grid ensures uniformity in the spacing between columns

Is there a way to access and parse a CSV file from a URL within a Next.js project?

update the dropdown values in the database by submitting the form

The function `map` cannot be applied to `this.state.[object]`

Customized slider in jQuery UI allowing users to select height using a scaled ruler

Incorporate vanilla JavaScript and HTML into a Next.js application

The Bootstrap accordion-toggle incorrectly displays the content symbol (+/-) upon initial page load

Dynamic React animation with sliding elements

Retrieve() displays solely the initial array within an object

Style the "focus" pseudo-class of an input element using Vue programmatically

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

When I expand one panel, I want to automatically close any other opened panel to ensure only one section is expanded at a

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

What is the most effective method for storing an object in React?

Is it possible to merge upload file and text input code using AJAX?

Tell me the permissions that a user possesses in discord.js

What could be causing the problem with my CSS background-image being referenced correctly?

What method is most effective for combining two JSON files in Angular?