Hide Elements in HTML and Jquery

Question

Hide Elements in HTML and Jquery

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (1 votes)

2

I'm doing a questionnaire in HTML and Jquery, when I click on an image that contains a question that is inside a section I want that section to hide and the next section appears, with Jquery I make a selection of the classes that contain the section and show me the id of each of the sections to know what section I am currently in, I can hide it and show the following but I can not find a way to not continue taking the first section that is in the HTML since always It shows me id 1 which is the first.

Is there a way to completely destroy after having occupied a section?

  <main class="main">

        <section class="seccion" id="1">
            <h2>Pregunta 1</h2>

            <div class="cuestionario">

                <div class="columnas">
                    <div class="contenido" id="1-1">
                        <img src="img/icono1.png" alt="">
                        <p>item 1</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="1-2">
                        <img src="img/icono2.png" alt="">
                        <p>item 2</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="1-3">
                        <img src="img/icono3.png" alt="">
                        <p>item 3</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="seccion" id="2" style="display: none">
            <h2>Pregunta 2</h2>

            <div class="cuestionario">

                <div class="columnas">
                    <div class="contenido" id="2-1">
                        <img src="img/icono1.png" alt="">
                        <p>item 4</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="2-2">
                        <img src="img/icono2.png" alt="">
                        <p>item 5</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="2-3">
                        <img src="img/icono3.png" alt="">
                        <p>item 6</p>
                    </div>
                </div>
            </div>
        </section>


        <section class="seccion" id="3" style="display: block">
            <h2>Pregunta 3</h2>

            <div class="cuestionario">

                <div class="columnas">
                    <div class="contenido" id="3-1">
                        <img src="img/icono1.png" alt="">
                        <p>item 4</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="3-2">
                        <img src="img/icono2.png" alt="">
                        <p>item 5</p>
                    </div>
                </div>

                <div class="columnas">
                    <div class="contenido" id="3-3">
                        <img src="img/icono3.png" alt="">
                        <p>item 6</p>
                    </div>
                </div>
            </div>
        </section>
       </main>

-------------------------- Jquery -------------------- -----

  $(document).ready(function () {



  $('.contenido').click(function () {


    var id = $(this).attr("id");

    var seccion = $('.seccion').attr("id");
    console.log(seccion);

    if (seccion == 1) {
        seccion1();
        $('#1').css('display', 'none');
        $('#2').css('display', 'block');
    }

     function seccion1() {


        switch (id) {

            case '1-1':

                console.log('Precio = 5000');
                break;

            case '1-2':

                console.log('Precio = 2500');
                break;

            case '1-3':
                console.log('Precio = 8000');
                break;
         }

     }

  });
  });

javascript jquery html5

asked by Packvt 17.04.2018 в 20:47

source

3 answers

4

You could take Jquery instead of the class, id and hide it without changing the properties of css, just do it with the show | hide of jquery like this:

Function(){
$('#1').hide();
$('#2').show();}

PS: This is not to remove the element from the DOM, only to hide it and make it appear, you can also use toggle(); depending on what you are looking for.

answered by 17.04.2018 в 20:54

1

you can use the next property: for the next element

 $(".seccion").next().css("display","none");

for the current element would be:

$(this).hide();

answered by 17.04.2018 в 20:53

Java doubt: .Equals () Difference between Execute and Query in MySQL

score 2 · Accepted Answer

2

You can use the .remove () function to remove the element you want from the DOM. Or you can create a function that uses the .toggle () function to show or hide the element.

answered by 17.04.2018 / 20:51

source