CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Peterssoen
Peterssoen

Reputation: 167

Remove class on outside click

I would like so that when i click outside and the default text loads the previous clicked class should be removed. So for example if i press " Fair Trade " and it becomes color: red; that should fade away when i press outside and load the default text just as it fades away when i click on another title. 

var $imgs = $(".section-link");


var data = [{
    title: "Fair Trade",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Toxicfree",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Quality",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Organic",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Vegan",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
];

// Get reference to the output area
var $outputDiv = $(".section-display");
var defaulttext = $outputDiv.find(".text1").html()
var defaultTitle = $outputDiv.find(".title1").html();



$imgs.on("click", function() {


  $This = $(this) ;
  
  $imgs.removeClass("clicked") ;
  $This.addClass("clicked");
    
  $(".title1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".title1", $outputDiv).html(data[$This.index() - 1].title)
      .animate({
        opacity: 1
      });
  });
  $(".text1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".text1", $outputDiv).html(data[$This.index() - 1].text)
      .animate({
        opacity: 1
      });
  })
});

$(document).on("click", function(e) {
  if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
    $(".title1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title1", $outputDiv).html(defaultTitle)
        .animate({
          opacity: 1
        });
    });
    $(".text1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text1", $outputDiv).html(defaulttext)
        .animate({
          opacity: 1
        });
    })
  }
})
.section-link {
  width: 100px;
  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.section-link.clicked{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
  <h2>
    <nobr>FAIR-TRADE</nobr>
  </h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
  <h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
  <h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
  <h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
  <h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
  <h2 class="title1">Lorem ipsum</h2>
  <h2 class="text1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
  <br> Tap on the symbols if you want to know more.</h2>
</div>

Upvotes: 1

Views: 91

Answers (2)

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

The no-break tag for fair-trade broke my logic; so I removed it;

besides that, this will meet your requirement.

var $imgs = $(".section-link");


var data = [{
    title: "Fair Trade",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Toxicfree",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Quality",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Organic",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Vegan",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
];

// Get reference to the output area
var $outputDiv = $(".section-display");
var defaulttext = $outputDiv.find(".text1").html()
var defaultTitle = $outputDiv.find(".title1").html();

$(window).click(function(e) {
if(!e.target.parentNode.classList.contains('clicked')) $(".section-link.clicked").removeClass("clicked")
});


$imgs.on("click", function() {


  $This = $(this) ;
  
  $imgs.removeClass("clicked") ;
  $This.addClass("clicked");
    
  $(".title1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".title1", $outputDiv).html(data[$This.index() - 1].title)
      .animate({
        opacity: 1
      });
  });
  $(".text1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".text1", $outputDiv).html(data[$This.index() - 1].text)
      .animate({
        opacity: 1
      });
  })
});

$(document).on("click", function(e) {
  if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
    $(".title1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title1", $outputDiv).html(defaultTitle)
        .animate({
          opacity: 1
        });
    });
    $(".text1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text1", $outputDiv).html(defaulttext)
        .animate({
          opacity: 1
        });
    })
  }
})
.section-link {
  width: 100px;
  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.section-link.clicked{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
  <h2>
    FAIR-TRADE
  </h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
  <h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
  <h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
  <h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
  <h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
  <h2 class="title1">Lorem ipsum</h2>
  <h2 class="text1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
  <br> Tap on the symbols if you want to know more.</h2>
</div>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add This $($imgs).removeClass('clicked')

var $imgs = $(".section-link");


var data = [{
    title: "Fair Trade",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Toxicfree",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Quality",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Organic",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
  {
    title: "Vegan",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  },
];

// Get reference to the output area
var $outputDiv = $(".section-display");
var defaulttext = $outputDiv.find(".text1").html()
var defaultTitle = $outputDiv.find(".title1").html();



$imgs.on("click", function() {


  $This = $(this) ;
  
  $imgs.removeClass("clicked") ;
  $This.addClass("clicked");
    
  $(".title1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".title1", $outputDiv).html(data[$This.index() - 1].title)
      .animate({
        opacity: 1
      });
  });
  $(".text1", $outputDiv).animate({
    opacity: 0
  }, function() {
    $(".text1", $outputDiv).html(data[$This.index() - 1].text)
      .animate({
        opacity: 1
      });
  })
});

$(document).on("click", function(e) {
  if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
    $(".title1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title1", $outputDiv).html(defaultTitle)
        .animate({
          opacity: 1
        });
    });
    $(".text1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text1", $outputDiv).html(defaulttext)
        .animate({
          opacity: 1
        });
        $($imgs).removeClass('clicked')
    })
  }
})
.section-link {
  width: 100px;
  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.section-link.clicked{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
  <h2>
    <nobr>FAIR-TRADE</nobr>
  </h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
  <h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
  <h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
  <h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
  <h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
  <h2 class="title1">Lorem ipsum</h2>
  <h2 class="text1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
  <br> Tap on the symbols if you want to know more.</h2>
</div>

Upvotes: 1

Related Questions