Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content within the <p> tag of <li> elements in the right-list with display: block, excluding those in the left-list.

I have experimented with various JavaScript code snippets to achieve this feature, but none seem to work as intended.

$('.content').hide();

$('.listelement').on('click', function() {
  if (!($(this).children('.content').is(':visible'))) {
    $('.content').slideUp();
    $(this).children('.content').slideDown();
  } else {
    $('.content').slideUp();
  }
});

$(function() {
  $('body').on('click', '.show', function() {
    css("display", "block");
  });
  
  // Other event handlers and functions
});
})
 
/* CSS Styling for the Dual List */
.ctList {
        padding-top: 20px;
    }

    .ctList .dual-list .list-group {
        margin-top: 8px;
    }

    // Additional CSS styles
}
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
// Script includes

javascriptjqueryhtmlcssajax

Answer №1

Achieve the desired effect by adding CSS styles and eliminating the inline display property from the paragraph tag using JavaScript.

$('.content').hide();

$('.listelement').on('click', function() {
  if (!($(this).children('.content').is(':visible'))) {
    $('.content').slideUp();
    $(this).children('.content').slideDown();
  } else {
    $('.content').slideUp();
  }
});

$(function() {
  $('body').on('click', '.show', function() {
    css("display", "block");
  });

  $('body').on('click', '.list-group .list-group-item', function() {
    $(this).toggleClass('active');
  });

  $('.listarrows button').click(function() {
    var $button = $(this),
      actives = '';
    if ($button.hasClass('move-left')) {
      actives = $('.list-right ul li.active');
      actives.clone().appendTo('.list-left ul');
      actives.remove();
    } else if ($button.hasClass('move-right')) {
      actives = $('.list-left ul li.active');
      actives.clone().appendTo('.list-right ul');
      actives.remove();
    }
  });

  $('[name="SearchDualList"]').keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') return;
    if (code == '27') $(this).val(null);
    var $rows = $(this).closest('.dual-list').find('.list-group li');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
      return !~text.indexOf(val);
    }).hide();
  });
});

$(function() {
  var ctList = [];
  var ctRight = [];
  var $tBody = $("#La");
  var $rbody = $("#accordian");

  $.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
    data.topic_info.qt_ct_connection.map(value => {
      value.ct_list.forEach(CTLIST => {
        $tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p>
          <a href="#demo_${CTLIST.ct}" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a>
          <div id="demo_${CTLIST.ct}" class="collapse">
            ${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
          </div>        
        </p>
        </li>`);
      });
    })
  })
})
.ctList {
  padding-top: 20px;
}

.ctList .dual-list .list-group {
  margin-top: 8px;
}

.ctList .list-left li,
.list-right li {
  cursor: pointer;
}

.ctList .list-arrows {
  padding-top: 100px;
}

.ctList .list-arrows button {
  margin-bottom: 20px;
}


/********************************/
/********************************/
/********************************/

/* ADD THIS */


.dual-list.list-left .well li.list-group-item p {
    display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
  <div class="container">
    <div class="row">
      <div class="dual-list list-left col-6">
        <div class="well text-right">
          <div class="row">
            <div class="col-md-10">
              <div class="input-group">
                <span class="input-group-addon glyphicon glyphicon-search">
                  <i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
                </span>
                <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
              </div>
            </div>
            <div class="col-md-2">
              <div class="btn-group">
                <a class="btn btn-default selector" title="select all">
                  <i class="glyphicon glyphicon-unchecked"></i>
                </a>
              </div>
            </div>
          </div>
          <ul class="list-group" id="La"></ul>
        </div>
      </div>
      <div class="dual-list list-right col-6">
        <div class="well">
          <div class="row">
            <div class="col-md-2">
              <div class="btn-group">
                <a class="btn btn-default selector" title="select all">
                  <i class="glyphicon glyphicon-unchecked"></i>
                </a>
              </div>
            </div>
            <div class="col-md-10">
              <div class="input-group">
                <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                <span class="input-group-addon glyphicon glyphicon-search"></span>
              </div>
            </div>
          </div>

          <ul class="list-group" id="La">
            <li class="list-group-item" id="rl">point_in_first_quad
              <p>
                <a href="#demo_point_in_first_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a>
              </p>
              <div id="demo_point_in_first_quad" class="collapse">
                10, capable, true, true
              </div>
              <p></p>
            </li>
            <li class="list-group-item" id="rl">point_in_second_quad
              <p>
                <a href="#demo_point_in_second_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a>
              </p>
              <div id="demo_point_in_second_quad" class="collapse">
                10, capable, true, true
              </div>
              <p></p>
            </li>
            <li class="list-group-item" id="rl">trapezium_draw_slope_area_equ
              <p>
                <a href="#demo_trapezium_draw_slope_area_equ" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a>
              </p>
              <div id="demo_trapezium_draw_slope_area_equ" class="collapse">
                20, strong, true, true
              </div>
              <p></p>
            </li>
          </ul>    


          <form>
            <ul class="list-group" id="accordian">
              <!-- right list  -->
            </ul>
            <input type="submit" value="submit" name="submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

javascripthtmlcssreactjs

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

I've encountered a similar question before, but unfortunately, the solution provided didn't help me! I'm relatively new to JavaScript and have been struggling with this issue for nearly a day now without success. The structure of my class a ...

javascriptcanvas

Setting a cookie using express.js with a 'j' prefix

Trying to establish a cookie using res.cookie as shown below: res.cookie('userId',req.user._id); //cookie set here console.log(req.user._id); //correct value returned, eg abc However, I'm noticing j:"abc" in my cookie. What could be the re ...

javascriptnode.jsexpress

The resolve in Angular UI-Router is not being properly injected into the controller

As a Java developer venturing into the world of Angular and Express, I am encountering challenges along the way. To gain hands-on experience, I am attempting to create a small application using these technologies. The Goal: I have provided a password rese ...

javascriptangularjsnode.jsexpressangular-ui-router

Vibrant shades of color overflow the Mui Radio

For my current web project, I am utilizing Mui for styling purposes. I am seeking guidance on how to style a radio button in a way that it appears completely filled with one color when selected. It is important that this styling method is compatible with M ...

cssreactjsmaterial-uistyled-components

What is the best way to create a React filter utilizing the Autocomplete component from MaterialUI and incorporating state management?

I am currently in the process of creating a filter using the Autocomplete component from MaterialUI. As I select options from the dropdown menu, several things are happening: The Autocomplete automatically adds the selected options to the Chip Array. The ...

javascriptreactjsmaterial-uireact-props

Creating an interactive flip card using HTML and CSS

I am a beginner in HTML and I'm looking to create a specific element that flips. I have created this file. However, when the first element is flipped (refer to the codepen), the content appears at the bottom (see image). Can someone assist me in ensu ...

htmlcssweb-deploymentbootstrap-5

Browsers seem to only respond to the FileReader onload event on the second try

Currently I am working on implementing in-browser image processing using HTML5 and encountering a strange issue specifically in Chrome. The problem lies with the onload event handler for the File API FileReader class, as the file is only processed correctl ...

javascripthtmlangularjs

Some elements are not responding to margin-top properly

I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...

htmlcsslayout

Updating or removing fullCalendar events in Symfony

I'm struggling to figure out how to update or delete fullcalendar events in my Symfony project. When adding a new event, I open a modal window with a form for submitting the event and inserting it into the database. This is my working controller: $ ...

javascriptsymfonyfullcalendar

use ajax to retrieve response using jquery

I am trying to implement a full div modal in Bootstrap 4 that fetches content using AJAX/PHP response. The PHP code I have contains the #ofTheLinkCallAction identifier. <a href="#demoModal" data-toggle="modal" data-target="#demoModal" class="modal-acti ...

phpjqueryajax

The external function in HTML Form's onsubmit attribute is failing to execute

My HTML Form has an onsubmit event that should call a validate() function. Everything works fine when the validate() function is inside a script tag at the end of the body tag. But if the validate() function is in an external JavaScript file, like in thi ...

javascriptjqueryhtmlforms

Experience seamless navigation with Highstock's fluid panning feature

I'm attempting to achieve seamless panning on a basic highstock chart by clicking and dragging within the plot area. Interestingly, I have found that this works flawlessly when my data is not based on timestamps: data: [-25.1,-23.8,-19.9,-19.1,-19.1 ...

javascripthighcharts

Retrieve and save only the outcome of a promise returned by an asynchronous function

I am currently working on an encryption function and have encountered an issue where the result is returned as an object called Promise with attributes like PromiseState and PromiseResult. I would like to simply extract the value from PromiseResult and s ...

javascriptasync-await

JavaScript Class Reference Error

Questioning the mysterious reference error in the JS class from MDN page. The structure of the Bad class's constructor leaves me baffled – is it because the empty constructor calls super() as a default? class Base {} class Good extends Base {} cla ...

javascript

Issues encountered with asp.net javascript function not executing

Having trouble getting a javascript function to execute via jquery in an asp.net setting. Despite trying various approaches, the function doesn't run upon clicking the button. I've experimented with omitting jquery and using a static html input c ...

javascriptjqueryasp.netrazor-2

What are the best methods for cropping SVG images effectively?

Is it possible to crop a large SVG background that has elements rendered on top of it so that it fits the foreground elements? I am using svg.js but have not been able to find a built-in function for this. Can an SVG be cropped in this way? ...

javascriptreactjssvg.js

Is it possible to pass multiple parameters in one onClick event?

My search bar is located below. Upon clicking the 'search' button, I wish for it to update results and redirect to a different page simultaneously. function SearchBar(props) {   const [innerSearch, setInnerSearch] = useState(""); ...

javascriptreactjssearch

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

On my webpage, I have buttons that are generated dynamically using PHP from a MySQL table. Each button is wrapped in an anchor tag and when clicked, it triggers a Javascript function to carry out multiple tasks. One of these tasks requires extracting the ...

javascriptphpjqueryhtml

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

htmlcssasp.netvb.net