Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, then those fields should be displayed.

I need a JavaScript solution that can handle showing and hiding fields based on the property type of each search result. Implementing a general JS function for hiding the fields for Land properties might cause issues if there are Villas also present on the page that require those fields.

If anyone could provide some guidance or code snippets in JS to help me solve this problem, it would be highly appreciated!

Below are some HTML results showcasing different types of properties where specific fields should be either shown or hidden:

<div class="property-listing">
    <ul>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&amp;Text=NEW LISTING&amp;imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        MidasS
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>115.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
                            Villa in Javea
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
                    <p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains, and the Mediterranean Sea.</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>2</strong>Bedrooms</span>
                    <span id="spbaths"><strong>1</strong>Bathrooms</span>
                    <span id="sppool"><strong>Yes</strong>Pool</span>
                </div>
            </div>
        </li>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&amp;Text=REDUCED&amp;imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        PRO1011
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>155.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
                            Apartment in Famagusta
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
                    <p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>0</strong>Bedrooms</span>
                    <span id="spbaths"><strong>0</strong>Bathrooms</span>
                    <span id="sppool"><strong>No</strong>Pool</span>
                </div>
            </div>
        </li>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        cyc130
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>175.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
                            Country House in Not Specified
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
                    <p>;.lkijuhygtfrdeswaq</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>3</strong>Bedrooms</span>
                    <span id="spbaths"><strong>1</strong>Bathrooms</span>
                    <span id="sppool"><strong>Yes</strong>Pool</span>
                </div>
            </div>
        </li>

        <br> <br>
        <div class="pagination">
            <span class="disabled"><i class="fa fa-chevron-left"></i></span>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=1" class="page, active">1</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=2" class="page">2</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=3" class="page">3</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=4" class="page">4</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=2" class="next"><i class="fa fa-chevron-right"></i></a>
        </div>
    </ul>
</div>
javascriptjqueryhtmlcss

Answer №1

I'm going to create my own unique HTML layout to illustrate a simple if/else statement using jQuery.

function showHideContent() {

$(".result").each( function() {
  if ( $(this).hasClass("land") ) {
    $(this).children(".bedroom").hide();
    $(this).children(".bathroom").hide();
  }
  else if ( $(this).hasClass("villa") ) {
    $(this).children(".land-area").hide();
  }
});

}

showHideContent();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div class="result villa"><b>Villa</b><br>
 <span class="bedroom">Bedroom</span>
 <span class="bathroom">Bathroom</span>
 <span class="location">Location</span>
 <span class="land-area">Land-area</span>
</div>

<br>

<div class="result land"><b>Land</b><br>
 <span class="bedroom">Bedroom</span>
 <span class="bathroom">Bathroom</span>
 <span class="location">Location</span>
 <span class="land-area">Land-area</span>
</div>

Your current HTML structure may be confusing for some reasons, but you can easily improve it with these tips:

1) Ensure sppools, spbaths, and spbeds are classes instead of IDs. Using IDs multiple times on a page can cause issues with CSS and JS as they should be unique identifiers. Classes are more appropriate for elements that can appear multiple times.

2) Clearly define the type of each result within its corresponding div. Instead of searching within titles like "villa" or "house," assign a class to each item to indicate its type. This will make your code more efficient and organized.

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

Using a series of nested axios requests to retrieve and return data

Currently, I am utilizing Vue and executing multiple calls using axios. However, I find the structure of my code to be messy and am seeking alternative approaches. While my current implementation functions as intended, I believe there might be a more effic ...

javascriptvue.jsaxios

Styling the large drop-down menu for Internet Explorer 7

Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...

htmlcssinternet-explorerinternet-explorer-7cross-browser

Can you explain the purpose and function of stub.callsArg(index) feature in Sinon.JS?

Confusion has set in as I try to make sense of this. According to the documentation: stub.callsArg(index) - This command prompts the stub to execute the callback function found at the specified index. For instance, using stub.callsArg(0); will trigger the ...

javascriptunit-testingsinon

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

htmlcsstypescriptangular6

The issue of overwritten callbacks is occurring due to the use of multiple .use() functions on the

Utilizing a module known as consign, I am able to conveniently include multiple modules from a directory all at once, eliminating the need for numerous require statements. In my code, I have set the mount path for each endpoint at the beginning of the rout ...

javascriptnode.jsexpressconsign

What is the best way to implement a dropdown in MUI and React that displays functional components as items?

Here is a list of dummy components: const OwnerList = () => { return ( <Box sx={{ display: 'flex', }} className="owner-container" > <Avatar src='https://hips.hearstapps.com/hmg- ...

javascriptcssreactjsmaterial-ui

What is the process for extracting information from a middleware within a Next.js framework?

I have been working on developing an authentication system using JWT in Next.js. In order to achieve this, I created a middleware that can validate the JWT token and establish an authentication process as shown below: export default function middleware(req ...

javascriptreactjsnext.js

Link clicking does not trigger URL routing properly

I've been tasked with updating our web application, and I'm facing a challenge that I need help with. My boss wants users to be able to click on a link in an email and have the internal company web app directly navigate to a specific page indicat ...

javascriptjqueryhtml

The Execution of a Function Fails When Passed to a Functional Component

My functional component accepts a function called addEvent, which expects an event parameter. The problem arises when I try to call this function from props within another functional component, as the function does not seem to execute: const onOk = () =&g ...

javascriptreactjsreduxreact-redux

What steps can be taken to make sure that my Ajax request has completed before executing a new function within the window.onload event

Looking for solutions using plain vanilla JavaScript only, as I do not utilize Json or jQuery currently (I have come across several solutions on SE, but they all involve jQuery or Json). There are two functions within a window.onload=function(){... event ...

javascriptajax

How can I restrict website access to only specific IP addresses?

I am looking to restrict access to certain IP addresses on a website, but the issue is that dynamic IPs keep changing based on the source of internet connection. Is there a method to determine the static IP of the computer rather than relying on the dyna ...

javascriptjquerybrowsercross-browserip

Tips for horizontally aligning a modal with smooth transition effects using Material UI and ensuring it is responsive

Struggling to center a modal with transition using Material UI and facing challenges with responsiveness on small screens, particularly mobile devices. The modal looks good and is centered on smaller screens if no transition is used. However, when a trans ...

cssmaterial-uiresponsive

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

Displaying Response After Making an Ajax Request

How can I display the results of an echo from action.php back on index.php while executing the script in AJAX? For example, index.php calls action.php (AJAX) and once it is successful, action.php will echo some text. How do I display this text on index.ph ...

phpjqueryajax

Trigger a JavaScript/jQuery event using code instead of user interaction

Exploring the source code of a website has sparked my curiosity about how to programmatically activate the ajax autocomplete feature on a specific text box. Here is the snippet of relevant code that I have been examining: html: <div class="input-text ...

javascriptjqueryangularjshtml

jQuery's :last selector allows you to target the last

I need assistance with my jQuery code $('#share_module:last').css("background-color","red"); Unfortunately, it is only affecting the first #share_module Here is an example of the HTML structure: <div id = "share_module" class = "id of the ...

javascriptjqueryhtml

Is it possible to trigger a function dynamically upon checking a checkbox?

I’ve been working on a simple string formatting app using React, diving into hooks as I go. Right now, I’m tackling the part where I need to trigger specific text formatting functions based on checkbox selections. Let's say, if the lowercase chec ...

javascriptreactjs

Is there a way to include an edit, delete, details, and create new icon in an @html.actionLink within MVC?

This HTML code is specific to MVC and represents the formatting used: 1. @*@Html.ActionLink("Delete", "Delete", new { id=item.ActivityDepreciationTypeId })*@ 2. @*@Html.ActionLink("Details", "Details", new { id=item.ActivityDepreciationTypeId })*@ ...

htmlasp.net-mvc-4razor

Setting up proxy middleware in an express application

My application is structured with a frontend server (React) serving static files and a backend server (Express). I have noticed that custom header requests trigger preflight requests, causing latency in my application. My goal is to eliminate these preflig ...

javascriptexpressproxycors

Having trouble sending the code through post message

I was trying to send some code to a node application using Postman with a POST message. In the body, I included the following code: module.exports = function() { var express = require('express'), app = express(); app.set('po ...

javascriptnode.jsexpresspostman