Skip to main content
se añadieron 68 caracteres en el cuerpo
Origen Enlace
$("ul li").click(function() {
  
    $(this).addClass('active')
    var indice = $(this).index();
    if(indice == 0){
       $("ul li:eq("+(indice+1)+")").addClass("active").show();
 + (indice + 1) + " $("ul li:gt("+(indice+1)+")").addClassremoveClass("active").showhide();
      
    }else{
      $("ul li:eq("+(indice+1)+")").addClass("active").show();
 +     $(indice"ul li:eq("+(indice- 1) + "+")").addClass("active").show();
    
      $("ul li:lt(" + "+(indice - 1) + "+")").removeClass("active").hide();
      $("ul li:gt(" + "+(indice + 1indice+1) + "+")").removeClass("active").hide();
    }
    
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>

PD: cuando selecciones el primer elemento li desaparece la lista completa faltaría desarrollar un if para preguntar por si la posición en igual a 0

$("ul li").click(function() {

  $(this).addClass('active')
  var indice = $(this).index();

  $("ul li:eq(" + (indice + 1) + ")").addClass("active").show();
  $("ul li:eq(" + (indice - 1) + ")").addClass("active").show();

  $("ul li:lt(" + (indice - 1) + ")").removeClass("active").hide();
  $("ul li:gt(" + (indice + 1) + ")").removeClass("active").hide();
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>

PD: cuando selecciones el primer elemento li desaparece la lista completa faltaría desarrollar un if para preguntar por si la posición en igual a 0

$("ul li").click(function(){
  
    $(this).addClass('active')
    var indice = $(this).index();
    if(indice == 0){
       $("ul li:eq("+(indice+1)+")").addClass("active").show();
       $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
      
    }else{
      $("ul li:eq("+(indice+1)+")").addClass("active").show();
      $("ul li:eq("+(indice-1)+")").addClass("active").show();
    
      $("ul li:lt("+(indice-1)+")").removeClass("active").hide();
      $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
    }
    
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>
Origen Enlace

Según te ejemplo de me ocurre de la siguiente manera , usaremos algunas propiedades de jquery y usaremos lo siguiente:

  • eq que sirve para seleccionar un elemento como si fuera un array.
  • lt que va ha seleccionar todos los elementos de una lista anteriores del elemento.
  • gt que va ha seleccionar todos los elementos de una lista a partir de elemento que seleccionaremos con click
  • show que lo usaremos para mostrar los elementos.
  • hide que lo usaremos para ocultar los elementos.
  • index que lo usaremos para obtener la posición actual.

Con todo eso explicado vamos al resultado.!!!!

$("ul li").click(function() {

  $(this).addClass('active')
  var indice = $(this).index();

  $("ul li:eq(" + (indice + 1) + ")").addClass("active").show();
  $("ul li:eq(" + (indice - 1) + ")").addClass("active").show();

  $("ul li:lt(" + (indice - 1) + ")").removeClass("active").hide();
  $("ul li:gt(" + (indice + 1) + ")").removeClass("active").hide();
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>

Lo que importa realmente en el ejemplo es el jquery , donde primero obtendremos la posición de nuestro elemento usando la propiedad index, luego se lo asignamos a una variable para posterior hacer la lógica de seleccionar los elementos que están al costado y ocultar los demás. Explicado mas detallado, lo que obtengo es un numero al hacer $(this).index(); , con ese numero digo que usando eq me seleccione los elementos al costado ya que la lista en jquery cree que es un array por lo tanto restará una posición y sumara una posición para permitirse seccionar.

PD: cuando selecciones el primer elemento li desaparece la lista completa faltaría desarrollar un if para preguntar por si la posición en igual a 0

Espero te sirva saludos!!!