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

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Having trouble retrieving data from the API using Vue JS and printing the page? After fetching the data, some elements may not render completely when trying to print, resulting in blank data being displayed. While using a setTimeout function may work for s ...

javascriptvue.jsprintingreactive-programming

Error: The 'price' property is undefined and cannot be read at path C:NODEJS-COMPLETE-GUIDEcontrollersshop.js on line 45, character 37

I have been attempting to add my products to the cart and calculate the totalPrice, but I keep encountering an error. Here is the error message:- enter image description here. Below is the code from my shop.js file:- exports.postCart = (req, res, next) =&g ...

javascriptnode.js

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

I have a website that heavily relies on ajax, and I insert around 3k html formatted pages into the DOM through ajax requests. My current approach involves inserting the entire html responses using jQuery. However, another option is to output in xml or jso ...

htmlxmlajaxjson

Creating a table with merged (colspan or rowspan) cells in HTML

Looking for assistance in creating an HTML table with a specific structure. Any help is appreciated! Thank you! https://i.stack.imgur.com/GVfhs.png Edit : [[Added the headers to table]].We need to develop this table within an Angular 9 application using T ...

htmlangulartypescripthtml-tablerow

Instructions on activating the standard scrolling function for a specific DIV element

I'm struggling to achieve a specific scrolling effect on my one-page website. I want the initial section to be displayed as a full page, and when the user scrolls down, it should transition to the next section with a full page scroll. However, once th ...

javascriptjquery

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Utilizing WebView in my application to display html content for reading ebooks presented a challenge during development. After parsing the ebook and converting it into an html string, I load this string into the WebView component. myView.setVerticalScro ...

androidhtmlcsswebview

The script for choosing pages is malfunctioning

I'm having trouble with a script on my website. It works on the index page, but not on other pages. <div id="pages"></div>   <script>      a = location.href;      b = a.split('-');      c = b.length;    ...

javascriptjqueryajax

AngularJS offers a function known as DataSource for managing data sources

During a recent project, I had to convert xml data to json and parse it for my app. One issue I encountered was related to the DataSource.get() function callback in the controller. After converting the xml data using a service, I stored the converted data ...

javascriptangularjs

Click the button to save the text to your clipboard with a customized

Can anyone suggest a method for duplicating div text using JavaScript while preserving the style attributes (italics, font family, size, etc.)? My goal is to paste the copied text into Word and have it maintain the same appearance as on the webpage. For e ...

javascripthtml

Harmonizing Vue and JQuery compatibility

Is there full compatibility between Vue.js and JQuery? How about Vue.js and JQueryUI? I have experience using both frameworks without any issues in integration. Can anyone point out any potential conflicts that may arise? ...

jqueryjquery-uivue.js

A guide on breaking down the ID passed from the backend into three segments using React JS

I pulled the data from the backend in this manner. https://i.stack.imgur.com/vMzRL.png However, I now require splitting this ID into three separate parts as shown here. https://i.stack.imgur.com/iy7ED.png Is there a way to achieve this using react? Bel ...

javascriptreactjssplitmaterial-ui

Using JavaScript to dynamically fill a select dropdown menu

Currently, I am working on a Ruby on Rails application that involves two drop-down boxes. The challenge is to populate the second drop-down box based on the selection made in the first one. Here is the HTML code snippet: -Releases = Release.all %table. ...

jqueryruby-on-rails-3

Create a substitute for Object.seal, Object.freeze, and Object.preventExtensions applications

Is there a way to freeze an object's existing properties while still allowing new ones to be added? I can't seem to find any built-in functionality for Object.freezeExisting(), so maybe it's worth considering implementing it, possibly even w ...

javascriptnode.jsecmascript-6

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Bringing in PeerJs to the NextJs framework

Currently delving into NextJs and working on creating an audio chat application, I've hit a roadblock while attempting to import PeerJs. An error message keeps popping up saying 'window is not defined'. import Peer from 'peerjs'; ...

javascriptreactjsnext.jspeerjs

Adding a component dynamically with a link click in Angular: A step-by-step guide

I am encountering an issue with my web application setup. I have a navigation bar, a home page with left and right divs, and a view-associates component. My goal is to dynamically add the view-associates component into the home's right div when a spec ...

javascripthtmlangularcomponentsangular11

What are the steps to integrate <br> in a JavaScript code?

I have recently started learning about web development and I'm facing a challenge with this implementation. var obj = [[{ name: "John", age: 30, city: "New York"}, { name: "Ken", age: 35, city: "New Orleans"}]]; ...

javascripthtmlangular

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

When attempting to retrieve information about a product from Amazon using their productId with Express.js and ScraperAPI, an error is encountered: Error message: "{name: "RequestError", message: "Error: Invalid URI "${baseUrl}&url=https://www.amazon.com/d ...

javascriptnode.jsapiexpressweb-scraping

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

javascripthtml